jQuery .prop('checked', false) 不起作用答案

【问题标题】：jQuery .prop('checked', false) does not workjQuery .prop('checked', false) 不起作用
【发布时间】：2014-06-27 04:38:50
【问题描述】：

HTML：

<form class="form">
    <input type="checkbox" id="box" /> Check Me!
</form>

JS：

$(window).load(function() {
    var myFunc = function() {
        if($('#box').prop('checked', false)) {
            $('.form').append('<p>Checkbox is not checked.</p>');
        }
    }

    $('#box').on('change', myFunc);
});

这是一个 JSFiddle http://jsfiddle.net/3PYm7/

当我使用$('#box').prop('checked', false) 作为if 语句的条件时，它不起作用，但! $('#box').prop('checked') 工作得很好！

【问题讨论】：

请阅读文档：api.jquery.com/prop/#prop2
哇，Felix Kling 太有帮助了

标签： javascript jquery html prop

【解决方案1】：

$('#box').prop('checked', false) 语句不返回布尔值，而是将选中的属性设置为 false，因此不应在条件和正常行为中使用

if($('#box').prop('checked', false))

可以更改为使用 is() 和 :checked 选择器进行测试。

if($('#box').is(':checked'))

或

if($('#box:checked').length)

您可以使用原生javascript获得最佳性能

if(document.getElementById('box').checked)

你提到的工作语句$('#box').prop('checked')返回检查的属性值而不是设置。

【讨论】：

$('#box').prop('checked') === false 会比 jQuery 的 :checked 更快。它仍然可以完成工作！
感谢指点性能，我已经更新了代码。

【解决方案2】：

  if ($('#box').prop('checked')==false) {
      $('.form').append('<p>Checkbox is not checked.</p>');
  }

【讨论】：

你可以改用if(!$('#box').prop('checked')){}

【解决方案3】：

是的，这是一个已知的，

$('#box').prop('checked', false) 是一个 setter 版本，它将返回调用了 .prop() 方法的元素，而不是布尔结果。您应该改用 getter 版本来获取布尔值 $('#box').prop('checked')

阅读此处了解更多关于.prop(property)

【讨论】：

我遇到了同样的问题 - 不发表评论就被否决是没有建设性的。我会投票给你一个正确的答案

【解决方案4】：

试试这个

if($('#box').is(':checked')) // this will return true or false

【讨论】：

【解决方案5】：

与使用 setter which does not return a boolean 测试属性相比，您遇到的问题更多。

修复后，您的代码将在您每次取消选中时附加该消息。

我建议这个

Live Demo

$(function() {
   $('#myform').on("submit", function(e) {
     var checked = $('#box').is(":checked");
     $('#pleaseCheckBoxMessage').toggle(!checked);
     if (!checked) {
       e.preventDefault(); // stop submission
     }
  });
  $("#box").on("click",function() {
    $('#pleaseCheckBoxMessage').toggle(!this.checked);
  });  
});

【讨论】：

【解决方案6】：

这样试试，也是另一种检查方式

if (!$('#box').prop('checked')) {
        $('.form').append('<p>Checkbox is not checked.</p>');
    }

Updated Demo

$('#box').prop('checked')复选框改变时返回真或假

【讨论】：

【解决方案7】：

这是 jQuery 的一个普遍问题，想法是通过 jQuery 获取和设置值具有相同的函数名称，但这对新手来说非常混乱。

例如 .val('bla') 设置值 bla 但 .val() 返回当前值...这对于 attr、prop 等几乎相同，并且它们每个都有 StackOverflow 问题，因为有人不明白它应该如何工作。如果叫getProp、setProp，这些问题就不存在了。

【讨论】：