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
}
});
감사해요
편집하다:내가 선택한 응답은 내가 묻는 질문에 대한 답변이지만, 라디오 버튼 그룹을 구별하는 방법도 보여주기 때문에 바인딩()을 사용하는 답변이 마음에 듭니다.
해결책
$( 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()
이벤트 핸들러를 직접 연결하는 대신 추가 데이터를 이벤트 핸들러에 전달할 수 있고(여기에는 표시되지 않았지만 데이터는 세 번째 바인드() 인수임) 쉽게 바인드를 해제할 수 있기 때문에(그리고 그룹별로 바인드 및 바인드 해제가 가능함) 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