使用 jQuery 单击切换

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

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

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

通过在每次单击时翻转复选框的当前“选中”状态，可以轻松完成此操作。例子：

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

or:

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

或者，通过直接操作 DOM 'checked' 属性（即不使用attr() to fetch单击的复选框的当前状态）：

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

...等等。

注意：从 jQuery 1.6 开始，应使用以下方式设置复选框prop not attr:

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