jQueryを使用して、ラジオボタンのonClickイベントリスナーを設定する最良の方法は何ですか?
-
09-06-2019 - |
質問
次の HTML の場合:
<form name="myForm">
<label>One<input name="area" type="radio" value="S" /></label>
<label>Two<input name="area" type="radio" value="R" /></label>
<label>Three<input name="area" type="radio" value="O" /></label>
<label>Four<input name="area" type="radio" value="U" /></label>
</form>
次の JavaScript コードからの変更:
$(function() {
var myForm = document.myForm;
var radios = myForm.area;
// Loop through radio buttons
for (var i=0; i<radios.length; i++) {
if (radios[i].value == "S") {
radios[i].checked = true; // Selected when form displays
radioClicks(); // Execute the function, initial setup
}
radios[i].onclick = radioClicks; // Assign to run when clicked
}
});
ありがとう
編集:私が選択した応答は、私が尋ねた質問に対する答えですが、ラジオ ボタンのグループを区別する方法も示されているので、bind() を使用する答えが気に入っています。
解決
$( function() {
$("input:radio")
.click(radioClicks)
.filter("[value='S']")
.attr("checked", "checked");
});
他のヒント
$(document).ready(function(){
$("input[name='area']").bind("click", radioClicks);
});
functionradioClicks() {
alert($(this).val());
}
使うのが好きです bind()
イベント ハンドラーに直接接続する代わりに、追加データをイベント ハンドラーに渡すことができ (ここには示されていませんが、データは 3 番目のbind() 引数です)、簡単にバインドを解除できます (グループごとにバインドおよびアンバインドできるため)。 jQuery のドキュメントを参照してください)。
$(function() {
$("form#myForm input[type='radio']").click( fn );
});
function fn()
{
//do stuff here
}
$(function() {
$('input[@type="radio"]').click(radioClicks);
});
次のようなものが機能するはずだと思います(ただし、テストされていません)。
$("input[@type='radio']").each(function(i) {
if (this.val() == 'E') {
radioClicks();
this.get().checked = true;
}
}
$("input[@type='radio']").click(radioClicks);
$(function() {
$('#myForm :radio').each(function() {
if ($(this).value == 'S') {
$(this).attr("checked", true);
radioClicks();
}
$(this).click(radioClicks);
});
});
所属していません StackOverflow