javascript - 使用 Jquery 选中和取消选中复选框

Question

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

这是我的代码：

编辑：这是 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>

Answer 1

.is()并且.not()不一样

.is().not()如果匹配，则在删除 jQuery 元素时返回 true 或 false 。

因此，$(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'));

Answer 2

工作小提琴

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

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

})

Answer 3

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

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

Answer 4

这是工作小提琴， 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);
        }

Answer 5

使用.prop()：

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