Làm cách nào để xử lý thay đổi của hộp kiểm bằng cách sử dụng jQuery?

Question

Tôi có một số mã

<input type="checkbox" id="chk" value="value" /> 
<label for="chk">Value </label> 
<br/> 
<input type="button" id="But1" value="set value" /> 
<br /> 
<input type="button" id="But2" value="read checked" /> 

javascript:

$(document).ready(function() { 
    console.log("Ready ..."); 
    registerHandlers(); 

    function registerHandlers() { 
     $('#But1').click(function() { 
      $('#chk').prop('checked', !$('#chk').is(':checked')); 
     }); 
     $('#But2').click(function() { 
      var chk1 = $('#chk').is(':checked'); 
      console.log("Value : " + chk1); 
     }); 

     $('input[type="checkbox"]').change(function() { 
      var name = $(this).val(); 
      var check = $(this).prop('checked'); 
      console.log("Change: " + name + " to " + check); 
     }); 
    } 
}); 

Làm thế nào để xử lý các thay đổi của checkbox bằng jQuery? Tôi cần phải đặt trình xử lý để thay đổi bất kỳ hộp kiểm nào được chọn.

[cập nhật]

Có một hộp kiểm và một vài nút. Mỗi nút có thể thay đổi hộp kiểm. Làm cách nào để bắt sự kiện thay đổi hộp kiểm?

[Cập nhật]

tôi cần xử lý checkbox thay đổi trong ví dụ này jsfiddle. Khi tôi bấm vào hộp, thông báo "OK" nút không được hiển thị.

Answer 1

Sử dụng :checkbox selector:

$(':checkbox').change(function() { 

     // do stuff here. It will fire on any checkbox change 

}); 

Code: http://jsfiddle.net/s6fe9/

Answer 2

Hope, đây sẽ là một số giúp đỡ.

$('input[type=checkbox]').change(function() { 
    if ($(this).prop("checked")) { 
     //do the stuff that you would do when 'checked' 

     return; 
    } 
    //Here do the stuff you want to do when 'unchecked' 
}); 

Answer 3

Bạn có thể sử dụng Id của lĩnh vực này cũng

$('#checkbox1').change(function() { 
    if($(this).is(":checked")) { 
     //'checked' event code 
     return; 
    } 
    //'unchecked' event code 
}); 

Answer 4

$('#myForm').on('change', 'input[type=checkbox]', function() { 
    this.checked ? this.value = 'apple' : this.value = 'pineapple'; 
}); 

Answer 5

$("input[type=checkbox]").on("change", function() { 

    if (this.checked) { 

     //do your stuff 

    } 
}); 

Answer 6

Dường như với tôi removeProp không hoạt động đúng trong Chrome: jsfiddle

 $('#badBut1').click(function() { 
     checkit('Before'); 
     if($('#chk').prop('checked')) 
     { 
      $('#chk').removeProp('checked'); 
     }else{ 
      $('#chk').prop('checked', true); 
     } 
     checkit('After'); 
    }); 
    $('#But1').click(function() { 
     checkit('Before'); 
     if($('#chk').prop('checked')) 
     { 
      $('#chk').removeClass('checked').prop('checked',false); 
     }else{ 
      $('#chk').addClass('checked').prop('checked', true); 
     } 
     checkit('After'); 
    }); 

    $('#But2').click(function() { 
     var chk1 = $('#chk').is(':checked'); 
     console.log("Value : " + chk1); 
    }); 

    $('#chk').on('change',function() { 
     checkit('Result'); 
    }); 
    function checkit(moment) { 
     var chk1 = $('#chk').is(':checked'); 
     console.log(moment+", value = " + chk1); 
    }; 

Answer 7

nhận giá trị radio theo name

$('input').on('className', function(event){ 
     console.log($(this).attr('name')); 
     if($(this).attr('name') == "worker") 
      { 
       resetAll();     
      } 
    });