javascript jqueryラジオボタンのクリック


89

2つのラジオボタンとjqueryを実行しています。

<input type="radio" name="lom" value="1" checked> first
<input type="radio" name="lom" value="2"> second

これで、ボタンを使用して、関数を実行するようにonClickを設定できます。ラジオボタンの1つをクリックしたときに、ラジオボタンが機能するようにするにはどうすればよいですか。


4
注意。多くの人がキーボードを使用してフォームをナビゲートするので、フォーム要素がクリックに応答しないようにするのが最善です。
スーパールミナリー2014年

回答:


166

.change何にでも使える

$("input[@name='lom']").change(function(){
    // Do something interesting here
});

jQuery 1.3以降

「@」はもう必要ありません。正しい選択方法は次のとおりです。

$("input[name='lom']")

7
jQuery 1.3以降、 '@'は不要になることに注意してください。選択する正しい方法は次のとおりです。$("input[name='lom']")
lubar

4
このソリューションを以下の@JohnIdolのソリューションと、無線値に基づく条件付きステートメントで統合することは可能ですか?例$("input[name='lom']").change(function(){ if ($(this).val() === '1') {..... // rest conditional statements based on values here } ;
LazerSharks 2013

jQuery 1.3以降では、nameプロパティで「@」を使用しないでください。これを行うと、jquery.self-0a6570c….js?body=1:1464 Uncaught Error: Syntax error, unrecognized expressionエラーが発生します。したがって、それは選択の問題ではありません。
scaryguy 2016

53

id = radioButtonContainerIdのコンテナにラジオがある場合でも、onClickを使用して、選択されているラジオを確認し、それに応じていくつかの関数を実行できます。

$('#radioButtonContainerId input:radio').click(function() {
    if ($(this).val() === '1') {
      myFunction();
    } else if ($(this).val() === '2') {
      myOtherFunction();
    } 
  });

ありがとうございました。私のフィールドは配列の一部であり、input [name = 'xxx']表記を使用できなかったため、これはうまくいきました-<input type = "radio" name = "Need [measure_type]" id = "Need_measure_type" value = "aaa">
製作者

タブを押して矢印キーでマーカーを移動しても、これは反応しますか?
Alisso、2013年

これはモバイルでは機能しません#セレクターはモバイルでは機能しません。
zawhtut 2013

19
<input type="radio" name="radio" value="creditcard" />
<input type="radio" name="radio" value="cash"/>
<input type="radio" name="radio" value="cheque"/>
<input type="radio" name="radio" value="instore"/>

$("input[name='radio']:checked").val()

1
この回答には、コードをイベントに関連付ける方法は示されていませんが、ラジオボタングループの値を取得する方法に関する情報が含まれているのが気に入っています。
Manfred

1
$( "input [@ name = 'lom']")。change(function(){//ここで何か面白いことをする});
Bishoy Hanna 2014


8

これを行うにはいくつかの方法があります。ラジオボタンの周囲にコンテナを配置することを強くお勧めしますが、ボタンに直接クラスを配置することもできます。このHTMLでは:

<ul id="shapeList" class="radioList">
<li><label>Shape:</label></li>
<li><input id="shapeList_0" class="shapeButton" type="radio" value="Circular" name="shapeList" /><label for="shapeList_0">Circular</label></li>
<li><input id="shapeList_1" class="shapeButton" type="radio" value="Rectangular" name="shapeList" /><label for="shapeList_1">Rectangular</label></li>
</ul>

クラスで選択できます:

$(".shapeButton").click(SetShape);

またはコンテナIDで選択:

$("#shapeList").click(SetShape);

どちらの場合も、ラジオボタンまたはそのラベルをクリックするとイベントがトリガーされますが、奇妙なことに後者(「#shapeList」で選択)の場合、ラベルをクリックすると、何らかの理由で2回クリック関数がトリガーされます。少なくともFireFoxでは; クラスによる選択はそれを行いません。

SetShapeは関数であり、次のようになります。

function SetShape() {
    var Shape = $('.shapeButton:checked').val();
//dostuff
}

このようにして、ボタンにラベルを付けたり、同じページにさまざまなことを行う複数のラジオボタンリストを表示したりできます。ボタンの値に基づいてSetShape()で異なる動作を設定することにより、同じリスト内の各ボタンに異なる動作をさせることもできます。


3

DOM検索を制限することは常に良いことです。DOM全体がトラバースされないように、親も使用することをお勧めします。

とても速い

<div id="radioBtnDiv">
  <input name="myButton" type="radio" class="radioClass" value="manual" checked="checked"/>
 <input name="myButton" type="radio" class="radioClass" value="auto" checked="checked"/>
</div>



 $("input[name='myButton']",$('#radioBtnDiv')).change(
    function(e)
    {
        // your stuffs go here
    });
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.