2つのラジオボタンとjqueryを実行しています。
<input type="radio" name="lom" value="1" checked> first
<input type="radio" name="lom" value="2"> second
これで、ボタンを使用して、関数を実行するようにonClickを設定できます。ラジオボタンの1つをクリックしたときに、ラジオボタンが機能するようにするにはどうすればよいですか。
2つのラジオボタンとjqueryを実行しています。
<input type="radio" name="lom" value="1" checked> first
<input type="radio" name="lom" value="2"> second
これで、ボタンを使用して、関数を実行するようにonClickを設定できます。ラジオボタンの1つをクリックしたときに、ラジオボタンが機能するようにするにはどうすればよいですか。
回答:
.change
何にでも使える
$("input[@name='lom']").change(function(){
// Do something interesting here
});
jQuery 1.3以降
「@」はもう必要ありません。正しい選択方法は次のとおりです。
$("input[name='lom']")
$("input[name='lom']")
$("input[name='lom']").change(function(){ if ($(this).val() === '1') {..... // rest conditional statements based on values here } ;
jquery.self-0a6570c….js?body=1:1464 Uncaught Error: Syntax error, unrecognized expression
エラーが発生します。したがって、それは選択の問題ではありません。
id = radioButtonContainerIdのコンテナにラジオがある場合でも、onClickを使用して、選択されているラジオを確認し、それに応じていくつかの関数を実行できます。
$('#radioButtonContainerId input:radio').click(function() {
if ($(this).val() === '1') {
myFunction();
} else if ($(this).val() === '2') {
myOtherFunction();
}
});
<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()
これはいいでしょう
$(document).ready(function() {
$('input:radio').change(function() {
alert('ole');
});
});
これを行うにはいくつかの方法があります。ラジオボタンの周囲にコンテナを配置することを強くお勧めしますが、ボタンに直接クラスを配置することもできます。この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()で異なる動作を設定することにより、同じリスト内の各ボタンに異なる動作をさせることもできます。
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
});