如何使用jQuery處理複選框的更改？

Question

我有一些代碼

<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); 
     }); 
    } 
}); 

如何處理使用jQuery的複選框的變化？ 我需要把處理程序更改任何複選框選中。

[更新]

有一個複選框和幾個按鈕。 每個按鈕都可以更改複選框。 如何捕捉事件更改複選框？

[更新]

我需要辦理變更復選框，在這個例子中jsfiddle。 當我點擊框時，消息「確定」按鈕不顯示。

Answer 1

使用:checkbox選擇：

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

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

}); 

代碼：http://jsfiddle.net/s6fe9/

Answer 2

希望，這將有一定的幫助。

$('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

您可以使用現場的標識以及

$('#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

在我看來removeProp在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

獲得電臺價值名稱

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