확인란을 선택 / 선택 취소하면 이벤트가 클라이언트 측에서 발생하도록하고 싶습니다.
$('.checkbox').click(function() {
if ($(this).is(':checked')) {
// Do stuff
}
});기본적으로 페이지의 모든 확인란마다 발생하기를 원합니다. 클릭시 발생하는이 방법이 상태를 확인합니까?
더 깨끗한 jQuery 방법이 있어야한다고 생각합니다. 누구나 해결책을 알고 있습니까?
답변
change대신 이벤트에 바인딩합니다 click. 그러나 여전히 확인란이 선택되어 있는지 확인해야합니다.
$(".checkbox").change(function() {
if(this.checked) {
//Do stuff
}
});change이벤트에 대한 click이벤트 바인딩의 주요 이점은 확인란을 클릭 할 때마다 상태가 변경되지는 않는다는 것입니다. 확인란의 상태를 변경시키는 이벤트 만 캡처하려면 적절한 이름의 change이벤트 를 원합니다 .
또한 this.checkedDOM 요소의 속성에 직접 액세스하는 것이 더 짧고 빠르기 때문에 jQuery 객체에서 요소를 래핑하고 jQuery 메서드를 사용하는 대신 사용했습니다.
편집 (의견 참조)
모든 확인란을 얻으려면 몇 가지 옵션이 있습니다. :checkbox의사 선택기를 사용할 수 있습니다 .
$(":checkbox")또는 속성 동등 선택기를 사용할 수 있습니다 .
$("input[type='checkbox']")답변
나중에 어려움을 겪고있는 사람을 참조 할 수 있도록 확인란을 동적으로 추가하면 올바른 위 대답 이 작동하지 않습니다. 부모 노드가 특정 하위 항목에서 버블 링 된 이벤트를 캡처하고 콜백을 발행 할 수 있도록하는 이벤트 위임 을 활용해야합니다 .
// $(<parent>).on('<event>', '<child>', callback);
$(document).on('change', '.checkbox', function() {
if(this.checked) {
// checkbox is checked
}
});document부모 선택기 에 사용할 필요는 거의 없습니다 . 대신 이벤트가 너무 많은 레벨로 전파되지 않도록보다 구체적인 상위 노드를 선택하십시오.
아래 예제는 동적으로 추가 된 dom 노드의 이벤트가 이전에 정의 된 리스너를 트리거하지 않는 방법을 보여줍니다.
$postList = $('#post-list');
$postList.find('h1').on('click', onH1Clicked);
function onH1Clicked() {
alert($(this).text());
}
// simulate added content
var title = 2;
function generateRandomArticle(title) {
$postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}
setTimeout(generateRandomArticle.bind(null, ++title), 1000);
setTimeout(generateRandomArticle.bind(null, ++title), 5000);
setTimeout(generateRandomArticle.bind(null, ++title), 10000);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
<article class="post">
<h1>Title 1</h1>
</article>
<article class="post">
<h1>Title 2</h1>
</article>
</section>이 예제는 특정 노드 ( h1이 경우)에 대한 이벤트를 캡처하고 해당 이벤트에 대한 콜백을 발행 하기 위해 이벤트 위임 사용법을 표시 합니다.
$postList = $('#post-list');
$postList.on('click', 'h1', onH1Clicked);
function onH1Clicked() {
alert($(this).text());
}
// simulate added content
var title = 2;
function generateRandomArticle(title) {
$postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}
setTimeout(generateRandomArticle.bind(null, ++title), 1000); setTimeout(generateRandomArticle.bind(null, ++title), 5000); setTimeout(generateRandomArticle.bind(null, ++title), 10000);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
<article class="post">
<h1>Title 1</h1>
</article>
<article class="post">
<h1>Title 2</h1>
</article>
</section>답변
또 다른 솔루션
$('.checkbox_class').on('change', function(){ // on change of state
if(this.checked) // if changed state is "CHECKED"
{
// do the magic here
}
})답변
체크 된 체크 박스에만 이벤트를 첨부하려는 의도 (따라서 체크 표시를 해제하고 나중에 다시 체크하면 발생)는 이것이 원하는 것입니다.
$(function() {
$("input[type='checkbox']:checked").change(function() {
})
})모든 체크 박스에 이벤트를 첨부하려는 경우 (확인 및 선택 안함)
$(function() {
$("input[type='checkbox']").change(function() {
})
})확인되지 않은 상태에서만 확인을 원할 경우 @James Allardice가 위의 답변을합니다.
BTW input[type='checkbox']:checked는 CSS 선택기입니다.
답변
$(document).ready(function () {
$(document).on('change', 'input[Id="chkproperty"]', function (e) {
alert($(this).val());
});
});답변
이벤트 (클릭 이벤트)를 기반으로하는 조치.
$('#my_checkbox').on('click',function(){
$('#my_div').hide();
if(this.checked){
$('#my_div').show();
}
});현재 상태에 따라 이벤트가 수행되지 않습니다.
$('#my_div').hide();
if($('#my_checkbox').is(':checked')){
$('#my_div').show();
}답변
아마도 이것은 당신을위한 대안 일 수 있습니다.
<input name="chkproperty" onchange="($(this).prop('checked') ? $(this).val(true) : $(this).val(false))" type="checkbox" value="true" />`