复选框的js与jQuery

在JavaScript中，for循环是重要的一节。很多案例都需要它，而在复选框中，for循环就是JavaScript中的主体。这个案例的样式就是3个按钮，分别为全选、全不选以及反选。

  在复选框中，“checked”有自动选择的效果。在全选中，采用for循环，使其所有选项添加checked。全不选与其相似只不过是将其删除。而反选则需要用for循环中嵌套if判断语句。

  

上图中，tst为所有被选中的复选框。

JavaScript相对简单，但在jQuery中，这一个案例并不简单。按照JavaScript中的翻版，只需要加上属性与属性值便可以达到效果。

而在jQuery中，attr()便是这种功能，但如果使用attr()，那么这个案例就只会是一个半成品。只有按钮才有效，如果单独勾选出一个选项，按钮就不会再对这个选项起作用。所以我们不能使用attr()方法。

对于这个我们需要使用prop()方法。

看上图，使用each()方法循环遍历每一个选项。

is是根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，都返回'false'。

而":checked"则是一个筛选选择器，筛选出有checked这个属性的选项而做出改变。

attr()方法与prop()方法很相似，但终究有着不同

attr():

attr() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值，则返回第一个匹配元素的值。

当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。 prop():

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

它们的不同很重要的是：

$('').attr()返回的是 html 对象。

$('').prop()返回的是 DOM 对象。

prop()方法的操作：

prop()方法操作radio（checkbox）之类，让其选中的时候，选中的值也会随之改变。即既可以控制其选中，也能控制其取消选中；

类似于$("对象").attr("checked");返回的是 true 或者 false；

如果有相应的属性，返回的是该属性，如果没有则返回空串；

attr()方法的操作

attr()方法操作 radio（checkbox）之类，让其选中的时候，其选中的值不会随之改变。即只能控制其选中，不能控制其取消选中；

类似于$("对象").attr("checked");返回的是'checked'或者 undefined；

如果有相应的属性，返回的是该属性，如果没有则返回 undefined；

attr 和 prop 使用的地方：

1. 添加属性名称该属性就会生效应该使用 prop()方法。

2.当遇到有true，false两个属性（如‘checked’，‘selected’，‘disabled’等）就使用prop()方法。

3.其他的则使用 attr()方法。