使用 jQuery 单击切换

Click toggle with jQuery

提问by eozzy

I've used a hover function where you do x on mouseover and y and mouseout. I'm trying the same for click but it doesn't seem to work:

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

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

I want the checkbox to be checked when clicking on a div, and unchecked if clicked again - a click toggle.

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

回答by karim79

This is easily done by flipping the current 'checked' state of the checkbox upon each click. Examples:

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

 $(".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'));
 });

or, by directly manipulating the DOM 'checked' property (i.e. not using attr()to fetchthe current state of the clicked checkbox):

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

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

...and so on.

...等等。

Note: since jQuery 1.6, checkboxes should be set using propnot attr:

注意：从 jQuery 1.6 开始，复选框应该使用propnot设置attr：

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

回答by Justin Tanner

Another approach would be to extended jquery like this:

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

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

Then call:

然后调用：

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

回答by Tim Santeford

Warning: using attr()or prop()to change the state of a checkbox does notfire the change eventin most browsers I've tested with. The checked state will change but no event bubbling. You must trigger the change event manually after setting the checked attribute. I had some other event handlers monitoring the state of checkboxes and they would work fine with direct user clicks. However, setting the checked state programmatically fails to consistently trigger the change event.

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

jQuery 1.6

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

回答by dcharles

You could use the togglefunction:

您可以使用该toggle功能：

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

回答by Thomas Seres

Why not in one line?

为什么不在一行？

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

回答by miosser

jQuery: Best Way, delegate the actions to jQuery (jQuery = jQuery).

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

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
    return !val;
});

回答by Ross Mehlman

I have a single checkbox named chkDueDateand an HTML object with a click event as follows:

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

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

Clicking the HTML object (in this case a <span>) toggles the checked property of the checkbox.

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

回答by dobs

<label>
    <input
        type="checkbox"
        onclick="$('input[type=checkbox]').attr('checked', $(this).is(':checked'));"
    />
    Check all
</label>

回答by keithics

Easiest solution

最简单的解决方案

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

回答by Saeed

Another alternative solution to toggle checkbox value:

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

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

});