使用 Jquery 选中和取消选中复选框答案

【问题标题】：Checking and Unchecking Checkbox with Jquery使用 Jquery 选中和取消选中复选框
【发布时间】：2013-08-04 05:59:58
【问题描述】：

我正在尝试获取一个复选框来选中并取消选中它是否未被选中。它正在检查是否未选中 - 但如果是选中则不取消选中。很奇怪。提前致谢！

这是我的代码：

编辑：这是 jsfiddle：http://jsfiddle.net/itamark/UnR4X/

JS：

$(':checkbox').mouseenter(function(){
    if($(this).not(':checked')) {
        alert('notchecked');
        $(this).attr('checked', true);
    }
    else if($(this).is(':checked')){
        alert('ischecked');
        $(this).attr('checked', false);
    }


})

HTML：

<input type="checkbox" name"myCheck" id="chk1"/>Checkbox</label>

【问题讨论】：

试试这个 - stackoverflow.com/questions/426258/…
在悬停时执行此操作毫无意义，因为一旦您取消悬停/鼠标移出，无论用户的行为如何，复选框都会始终被取消选中。这有什么意义？
@DavidThomas 是的 - 从那以后我实际上已经切换到 .mouseenter。我会更新代码。
但又一次：有什么意义？你想做什么？
@DavidThomas 我管理的网站需要大量单击复选框才能完成某些任务，而 checkall chrome 扩展只允许一个元素中的全部或全部都没有帮助。所以我想我会尝试构建我的第一个 chrome 扩展来帮助有同样问题的其他人。

标签： javascript jquery

【解决方案1】：

使用.prop():

$(this).prop('checked', true);
$(this).prop('checked', false);

【讨论】：

这实际上是我尝试的第一种方法，但没有奏效。只是插上电源重试，没有雪茄。对不起。
但是你的 jsfiddle 需要修正一些错字，然后它可以工作：jsfiddle.net/UnR4X/6 但不确定你到底在寻找什么。您正在使用悬停输入/输出处理程序。检查 DOC，你可能想要别的东西

【解决方案2】：

我认为触发点击事件会改变复选框的选中状态

$(':checkbox').hover(function() {
  $(this).trigger('click'); 
});

【讨论】：

我很兴奋，因为这种方法奏效了。它选中该框但不添加属性。尝试将其添加为道具，这会再次破坏检查切换。
再想一想 - 它不需要视觉上的 clicked 属性，可以考虑为所有意图和目的进行检查，对吧？

【解决方案3】：

.is() 和.not() 不一样

.is() 返回 true 或 false 而.not() 删除匹配的 jQuery 元素。

因此，$(selector).not() 将始终为真，因为定义了 jquery。

要检查元素是否存在，请使用.length。

$(':checkbox').hover(function(){
    if($(this).not(':checked').length) {
        $(this).prop('checked', true);
    }
    else if($(this).is(':checked')){
        $(this).prop('checked', false);
    }
})

小提琴：http://jsfiddle.net/UnR4X/3/

你也可以使用 1 班轮：

$(this).prop('checked', !$(this).prop('checked'));

【讨论】：

虽然所有其他人都非常有帮助 - 这个单线工作得很好。我还了解到，您不必在元素中直观地拥有该属性以使其保持不变。这是正确的吗？

【解决方案4】：

Working Fiddle

请注意，您输入的名称参数需要相等。此外，除非您指定悬停处理程序和悬停处理程序，否则悬停错误的事件，否则该函数将继续运行。更容易使用 mouseenter 处理程序。仅在以这种方式开始悬停时触发。如果您想在鼠标离开时发生其他事情，您可以指定鼠标离开。或者您可以在悬停函数中指定 2 个函数来执行此操作。

$(':checkbox').mouseenter(function(){
        if($(this).prop('checked')) {
            $(this).prop('checked', false);
        }
        else{
            $(this).prop('checked', true);
        }

})

【讨论】：

是的 - 这给了你复选标记 - 但我还没有在元素中看到 checked="checked" 或只是 checked 属性。
@ItamarOKestenbaum 你不需要检查是否在元素中。看到这个小提琴。 jsfiddle.net/UnR4X/12 jquery 仍然会知道它已检查，并且 http 帖子也会发布它。
唷。这让事情变得简单多了。谢谢！

【解决方案5】：

这是工作小提琴， http://jsfiddle.net/UnR4X/11/

$(':checkbox').mouseenter(function(){
        if($(this).prop('checked')) {
            $(this).prop('checked', false);
             $(this).removeAttr('checked');
        }
        else{
            $(this).prop('checked', true);
            $(this).attr('checked',true);
        }

【讨论】：