70

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

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

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

4

15 回答 15

214

这很容易通过在每次单击时翻转复选框的当前“选中”状态来完成。例子：

 $(".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);
 });
于 2009-09-23T16:46:57.503 回答
27

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

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

然后调用：

$('.offer').find(':checkbox').toggleCheckbox();
于 2010-11-13T06:24:59.050 回答
11

警告：在我测试过的大多数浏览器中，使用attr()或prop()更改复选框的状态不会触发更改事件。检查状态会改变，但没有事件冒泡。您必须在设置选中属性后手动触发更改事件。我有一些其他事件处理程序监视复选框的状态，它们可以在用户直接点击时正常工作。但是，以编程方式设置选中状态无法始终触发更改事件。

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
});
于 2011-07-29T20:53:47.957 回答
7

您可以使用以下toggle功能：

$('.offer').toggle(function() {
    $(this).find(':checkbox').attr('checked', true);
}, function() {
    $(this).find(':checkbox').attr('checked', false);
});
于 2009-09-23T16:46:48.947 回答
2

为什么不在一条线上？

$('.offer').click(function(){
    $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').attr('checked'));
});
于 2010-11-02T16:57:17.860 回答
1

jQuery：最好的方法，将操作委托给 jQuery（jQuery = jQuery）。

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
    return !val;
});
于 2014-03-08T16:33:38.190 回答
1

我有一个名为的复选框chkDueDate和一个带有单击事件的 HTML 对象，如下所示：

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

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

于 2011-11-08T20:58:47.810 回答
0 
<label>
    <input
        type="checkbox"
        onclick="$('input[type=checkbox]').attr('checked', $(this).is(':checked'));"
    />
    Check all
</label>
于 2012-02-23T22:08:17.590 回答
0 
$('.offer').click(function() { 
    $(':checkbox', this).each(function() {
        this.checked = !this.checked;
    });
});
于 2009-09-23T17:25:07.840 回答
0

切换复选框值的另一种替代解决方案：

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

});
于 2013-01-26T16:04:15.397 回答
0

尝试改变这个：

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

对此：

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

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

于 2009-09-23T16:44:17.157 回答
0 
$('.offer').click(function(){ 
    if ($(this).find(':checkbox').is(':checked'))
    {
        $(this).find(':checkbox').attr('checked', false); 
    }else{
        $(this).find(':checkbox').attr('checked', true); 
    }
});
于 2009-09-23T16:46:38.737 回答
0

在 JQuery 中，我认为 click() 不接受两个切换函数。您应该为此使用 toggle() 函数： http: //docs.jquery.com/Events/toggle

于 2009-09-23T16:47:56.753 回答
0

最简单的解决方案 

$('.offer').click(function(){
    var cc = $(this).attr('checked') == undefined  ? false : true;
    $(this).find(':checkbox').attr('checked',cc);
});
于 2012-04-04T04:49:54.697 回答
0 
    $('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
于 2013-07-16T02:58:58.543 回答