JQuery实现checkbox全选

2017-10-31 · 🙈Ray · 0条 · 277次

要使用JQuery实现checkbox的全选,可以参考下面的代码:

$("#chooseall").change(function() { // chooseall是全选checkbox的ID
if (this.checked) { //勾选“全选按钮”
$("input[type='checkbox'][name=' ']").prop('checked', true);
} else { //取消勾选“全选”按钮
$("input[type='checkbox' ][name=' ']").prop('checked', false);
}
});

注意设置checked使用的是prop()方法,而不是attr()方法。

在JQuery1.6以后加入了prop()方法,来获取和设置property(特性)。而attr()方法用来获取和设置attribute(属性)。

JQuery官网中介绍的何时使用prop()方法:

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelectedshould be retrieved and set with the .prop() method.

如果使用attr()会导致不一致的表现。

此处如果使用attr()方法来设置全选和取消全选,会导致如下问题:

勾选了某个checkbox,或者取消勾选了某个checkbox,那么点击全选(或者取消)全选的时候,这个按钮就无法表现出选中(或者取消选中)的样式,虽然代码仍然改变了它的属性。


  0