jQuery .prop('checked', false)无效。

Question

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')却可以正常工作！

- uxcode

---

请阅读文档：https://api.jquery.com/prop/#prop2 - Felix Kling

哇，Felix Kling非常有帮助。 - dangel

Answer 1

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

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

可以使用带有 :checked 选择器的 is() 来进行测试。

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

或者

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

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

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

您提到的工作语句 $('#box').prop('checked') 返回已勾选属性的值，而不是设置该属性。

- Adil

---

$('#box').prop('checked') === false比jQuery的:checked更快。 它仍然可以完成任务！ - Bill Criswell

感谢您指出性能问题，我已经更新了代码。 - Adil

Answer 2

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

- Amarnath R Shenoy

---

你可以使用 if(!$('#box').prop('checked')){} 代替。 - Tân

Answer 3

你有更多问题，比如使用一个不返回布尔值的setter来测试属性。修复后，你的代码将在每次取消勾选时都添加消息。

我建议这样做： 演示

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

- mplungjan

Answer 4

这是一个已知的问题，$('#box').prop('checked', false) 是一个设置器版本，它会返回调用了 .prop() 方法的元素，而不是布尔结果。你应该使用获取器版本来获取布尔值，$('#box').prop('checked')

点击这里了解更多关于.prop(property)的信息

- Rajaprabhu Aravindasamy

---

我有相同的问题 - 在没有评论的情况下被踩是不建设性的。如果你的答案正确，我会给你点赞。 - mplungjan

Answer 5

试试这个

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

- Sridhar R

Answer 6

这是 jQuery 的一个普遍问题，旨在通过 jQuery 获取和设置值的相同函数名称对新手非常困惑。

例如，.val（'bla'）设置值 bla，但 .val（）返回当前值... 对于 attr、prop 等都是类似的情况，每个人都有一个 StackOverflow 问题，因为有些人不理解它应该如何工作。如果它被称为 getProp、setProp，这些问题将不存在。

- Christophe Roussy

Answer 7

试试这样做。这也是另一种检查的方式。

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

更新演示

$('#box').prop('checked') 当复选框被改变时，它将返回 true 或 false。

- Balachandran