.prop('checked',false) 或者 .removeAttr('checked')？

Question

随着prop方法的推出，现在我需要知道取消选中复选框的通用方法。是以下哪种方式：

$('input').filter(':checkbox').removeAttr('checked');

或者

$('input').filter(':checkbox').prop('checked',false);

- Phillip Senn

---

你读过John Resig的文章了吗？http://ejohn.org/blog/jquery-16-and-attr/ - Jared Farrish

Answer 1

jQuery 3

从jQuery 3开始，removeAttr不再将相应的属性设置为false：

在jQuery 3.0之前，对于诸如checked、selected或readonly等布尔属性使用.removeAttr()也会将相应的命名属性设置为false。这种行为对于古老版本的Internet Explorer是必需的，但对于现代浏览器来说是不正确的，因为属性表示初始值，而属性表示当前（动态）值。

在DOM元素上使用.removeAttr( "checked" )几乎总是错误的。唯一有用的时候是如果DOM稍后将被序列化回HTML字符串。在所有其他情况下，应该使用.prop( "checked", false )。

更新日志

因此，只有在使用此版本时，.prop('checked',false)才是正确的方法。

---

原始答案（2011年）：

对于具有基础布尔属性的属性（其中checked是其中之一），removeAttr会自动将基础属性设置为false。（请注意，这是在jQuery 1.6.1中添加的向后兼容的“修复”之一）。

因此，两种方法都可以……但你给出的第二个例子（使用prop）是两者中更正确的。如果你的目标是取消选中复选框，你确实想要影响属性，而不是属性，并且没有必要通过removeAttr来实现。

- John Flatness

---

你可以使用removeProp()，但不应该这么做。从文档中可以看到：“注意：不要使用[removeProp（）]来删除诸如checked、disabled或selected之类的本地属性。这将完全删除属性，并且一旦删除，就无法再次添加到元素中。而是使用.prop（）将这些属性设置为false。”removeProp实际上只适用于自定义属性。 - John Flatness

Answer 2

使用复选框的 checked 属性，它可以是 true 或 false。

jQuery：

if($('input[type=checkbox]').is(':checked')) {
    $(this).prop('checked',true);
} else {
    $(this).prop('checked',false);
}

- Suraj Rawat

---

我们可以使用一行代码消除if和else，$(this).prop('checked', $('input[type=checkbox]').is(':checked')); - Yousaf Hassan

我们如何指定要检查状态的Ctrl ID？ - singhswat

如果 ($(''#id').is(':checked')) { $(this).prop('checked',true); } else { $(this).prop('checked',false); } - Suraj Rawat

Answer 3

我建议同时使用prop和attr，因为在Chrome中我曾遇到问题，而使用这两个函数我解决了它。

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

- Ragnar

---

是的，对于Chrome，请使用：$（“input[type ='checkbox']，input[type ='radio']”）.prop（“checked”，false）.attr（“checked”，false）.removeAttr（“checked”）; - Rod

我使用自定义组件（CSS + JS）来替换输入单选框和复选框。这是我唯一有效的方法。谢谢！ - Silvio Delgado

@ragnar 这个解决方案对我有用。谢谢！ - Souvik Ray

Answer 4

另一个实现同样效果的方法是过滤 type=checkbox 属性：

$('input[type="checkbox"]').removeAttr('checked');

或者

$('input[type="checkbox"]').prop('checked' , false);

来自jQuery API文档：

属性和特性之间的区别在某些情况下非常重要。在jQuery 1.6之前，.attr()方法有时会在检索某些属性时考虑属性值，这可能导致不一致的行为。从jQuery 1.6开始，.prop()方法提供了一种显式检索属性值的方式，而.attr()则检索属性。

- tonnoz

---

问题是“哪一个更正确”，而不是“还有其他的做法吗？”您似乎没有尝试回答这个问题。 - Andrew Stubbs

Answer 5

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>   

  

  <input id="checkbox" type="checkbox" onchange='act(this)'>
     
  <input id="checkbox" type="checkbox" onchange='act(this)'>
  
  <script>
  
  
   function act(element){
   
       if($(element). prop('checked'))  
       {
           console.log('You have Checked it');
       }else
       {
        console.log('You Un-Checked it');
       }
   }
   
   </script>    

- sarthak kumar panda

---

这段代码片段并没有回答原始问题，即取消复选框的接受（正确）方式是什么。 - seemly