单击以使用jQuery切换

Question

我使用了一个悬停功能,你可以在鼠标悬停和y和mouseout上执行x.我正在为点击尝试相同但它似乎不起作用:

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

我希望在单击a时选中复选框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开始,复选框应该使用propnot 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()来更改复选框的状态不会在我测试过的大多数浏览器中触发更改事件.检查状态将发生变化,但没有事件冒泡.您必须在设置checked属性后手动触发更改事件.我有一些其他事件处理程序监视复选框的状态,它们可以正常用户点击直接.但是,以编程方式设置已检查状态无法始终触发更改事件.

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

你可以使用这个toggle功能:

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