jquery - 单击使用 jQuery 切换

Question

我使用了悬停功能，您可以在鼠标悬停时执行 x，在鼠标悬停时执行 y 和鼠标移开。我正在尝试同样的点击，但它似乎不起作用:

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

我希望在单击 div 时选中复选框，如果再次单击则取消选中 - 单击切换。

Answer 1

这很容易完成，只需在每次点击时翻转复选框的当前“已选中”状态。示例:

 $(".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() 来获取被点击复选框的当前状态):

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

...等等。

注意:自 jQuery 1.6 起，应使用 prop 而不是 attr 设置复选框:

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