单击切换使用jQuery单击切换使用jQuery(Click toggle with jQuery)

我用，你在鼠标悬停和y和鼠标移开做X悬停功能。 我想同样的点击，但它似乎不工作：

$('.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“检查”属性（即，不使用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);
 });

Answer 2:

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

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

然后调用：

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

Answer 3:

警告：使用ATTR（）或道具（）来更改复选框的状态不火在大多数浏览器我已经测试了变化事件 。 选中的状态会改变，但没有事件冒泡。 您必须设置检查属性后手动触发更改事件。 我有一些其他的事件处理程序监视复选框的状态，他们将很好地工作直接用户点击。 但是，以编程方式设置的选中状态未能持续触发这种改变事件。

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

Answer 5:

为什么不能在同一行？

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

Answer 6:

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

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

点击HTML对象（在此情况下的<span> ）切换复选框的选中属性。

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中我不认为点击（）接受两个功能切换。 您应该使用的切换（）函数： http://docs.jquery.com/Events/toggle

Answer 11:

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

Answer 12:

最简单的办法

$('.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:

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

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

文章来源: Click toggle with jQuery