点击切换与jQuery

我使用了hoverfunction，在mouseover和y以及mouseout上做x。 我正在尝试相同的点击，但似乎并没有工作：

$('.offer').click(function(){ $(this).find(':checkbox').attr('checked', true ); },function(){ $(this).find(':checkbox').attr('checked', false ); }); 

我想点击一个div时选中checkbox，如果再次点击，则取消选中 – 点击切换。

Answer 1

这可以通过点击每个点击翻转checkbox的当前“已检查”状态来轻松完成。 例子：

  $(".offer").on("click", function () { var $checkbox = $(this).find(':checkbox'); $checkbox.attr('checked', !$checkbox.attr('checked')); }); 

要么：

  $(".offer").on("click", function () { var $checkbox = $(this).find(':checkbox'); $checkbox.attr('checked', !$checkbox.is(':checked')); }); 

或者通过直接操作DOM的“checked”属性（即不使用attr()来获取点击checkbox的当前状态）：

  $(".offer").on("click", function () { var $checkbox = $(this).find(':checkbox'); $checkbox.attr('checked', !$checkbox[0].checked); }); 

…等等。

注意：由于jQuery 1.6，checkbox应该使用prop而不是attr来设置：

  $(".offer").on("click", function () { var $checkbox = $(this).find(':checkbox'); $checkbox.prop('checked', !$checkbox[0].checked); }); 

Answer 2

另一种方法是像这样扩展jQuery：

 $.fn.toggleCheckbox = function() { this.attr('checked', !this.attr('checked')); } 

然后打电话：

 $('.offer').find(':checkbox').toggleCheckbox(); 

Answer 3

警告：使用attr（）或prop（）更改checkbox的状态不会触发我testing过的大多数浏览器中的更改事件 。 检查的状态将改变，但没有事件冒泡。 设置checked属性后，必须手动触发更改事件。 我有一些其他的事件处理程序监视checkbox的状态，他们将直接用户点击工作正常。 但是，以编程方式设置已检查的状态将无法持续触发更改事件。

jQuery 1.6

 $('.offer').bind('click', function(){ var $checkbox = $(this).find(':checkbox'); $checkbox[0].checked = !$checkbox[0].checked; $checkbox.trigger('change'); //<- Works in IE6 - IE9, Chrome, Firefox }); 

Answer 4

你可以使用togglefunction：

 $('.offer').toggle(function() { $(this).find(':checkbox').attr('checked', true); }, function() { $(this).find(':checkbox').attr('checked', false); }); 

Answer 5

为什么不在一行？

 $('.offer').click(function(){ $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').attr('checked')); }); 

Answer 6

我有一个名为chkDueDatecheckbox和一个单击事件的HTML对象，如下所示：

 $('#chkDueDate').attr('checked', !$('#chkDueDate').is(':checked')); 

单击HTML对象（在本例中为<span> ）切换checkbox的选中属性。

Answer 7

jQuery：最好的办法，把行动委托给jQuery（jQuery = jQuery）。

 $( "input[type='checkbox']" ).prop( "checked", function( i, val ) { return !val; }); 

Answer 8

尝试改变这一点：

 $(this).find(':checkbox').attr('checked', true ); 

对此：

 $(this).find(':checkbox').attr('checked', 'checked'); 

不是100％肯定是否会这样做，但我似乎记得有类似的问题。 祝你好运！

Answer 9

 $('.offer').click(function(){ if ($(this).find(':checkbox').is(':checked')) { $(this).find(':checkbox').attr('checked', false); }else{ $(this).find(':checkbox').attr('checked', true); } }); 

Answer 10

在jQuery中，我不认为click（）接受两个切换function。 你应该使用toggle（）函数： http : //docs.jquery.com/Events/toggle

Answer 11

 $('.offer').click(function() { $(':checkbox', this).each(function() { this.checked = !this.checked; }); }); 

Answer 12

最简单的解决scheme

 $('.offer').click(function(){ var cc = $(this).attr('checked') == undefined ? false : true; $(this).find(':checkbox').attr('checked',cc); }); 

Answer 13

 <label> <input type="checkbox" onclick="$('input[type=checkbox]').attr('checked', $(this).is(':checked'));" /> Check all </label> 

Answer 14

切换checkbox值的另一种替代解决scheme：

 <div id="parent"> <img src="" class="avatar" /> <input type="checkbox" name="" /> </div> $("img.avatar").click(function(){ var op = !$(this).parent().find(':checkbox').attr('checked'); $(this).parent().find(':checkbox').attr('checked', op); }); 

Answer 15

  $('controlCheckBox').click(function(){ var temp = $(this).prop('checked'); $('controlledCheckBoxes').prop('checked', temp); });