javascript - 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')工作得很好！

Answer 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')返回检查的属性值而不是设置。

Answer 2

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

Answer 3

与使用不返回布尔值的 setter来测试属性相比，您遇到的问题更多。

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

我建议这个

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

Answer 4

是的，这是一个众所周知的，

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

阅读此处了解更多信息.prop(property)

Answer 5

尝试这个

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

Answer 6

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

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

更新的演示

$('#box').prop('checked')更改复选框时将返回 true 或 false

Answer 7

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

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