Jquery 在JQuery3.3.1版本中使用attr()复选框全选无效！

布满荆棘的人生 2023-10-18 13:46 86阅读 0赞

**注意: 在JQuery3.3.1版本**

使用 $('\[type=checkbox\]:checkbox').attr('checked', true);

单击按钮无效哦！

那么使用： .prop()

获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。

Contents:

*  [.prop( propertyName )][.prop_ propertyName]
    
     *  .prop( propertyName )
 *  [.prop( propertyName, value )][.prop_ propertyName_ value]
    
     *  .prop( propertyName, value )
     *  .prop( properties )
     *  .prop( propertyName, function(index, oldPropertyValue) )
 *  考虑一个DOM元素的HTML标记中定义的`<input type="checkbox" checked="checked" />` ，并假设它是一个JavaScript变量命名的`elem` ：
    
    <table> 
     <tbody> 
      <tr> 
       <th><code>elem.checked</code></th> 
       <td><code>true</code>&nbsp;(Boolean) 将随着复选框状态的改变而改变</td> 
      </tr> 
      <tr> 
       <th><code>$(elem).prop("checked")</code></th> 
       <td><code>true</code>&nbsp;(Boolean) 将随着复选框状态的改变而改变</td> 
      </tr> 
      <tr> 
       <th><code>elem.getAttribute("checked")</code></th> 
       <td><code>"checked"</code>&nbsp;(String) 复选框的初始状态;不会改变</td> 
      </tr> 
      <tr> 
       <th><code>$(elem).attr("checked")</code>&nbsp;<em>(1.6)</em></th> 
       <td><code>"checked"</code>&nbsp;(String) 复选框的初始状态;不会改变</td> 
      </tr> 
      <tr> 
       <th><code>$(elem).attr("checked")</code>&nbsp;<em>(1.6.1+)</em></th> 
       <td><code>"checked"</code>&nbsp;(String) 将随着复选框状态的改变而改变</td> 
      </tr> 
      <tr> 
       <th><code>$(elem).attr("checked")</code>&nbsp;<em>(pre-1.6)</em></th> 
       <td><code>true</code>&nbsp;(Boolean) 将随着复选框状态的改变而改变</td> 
      </tr> 
     </tbody> 
    </table>

解决：

$('\[type=checkbox\]:checkbox').prop('checked', true);

[.prop_ propertyName]: https://www.css88.com/jqapi-1.9/prop/#prop1
[.prop_ propertyName_ value]: https://www.css88.com/jqapi-1.9/prop/#prop2