jquery input checked全选与反选1.3.2的版本
jquery是一个流行的JavaScript库,它提供了许多实用的功能来简化Web开发过程。在这个例子中,我们将展示如何使用jquery来实现全选和反选的功能,特别是在1.3.2版本中。
让我们了解一下jquery的检查框(Checkbox)选择器:`:checked`。这个选择器可以选择所有.checked 属性为 true 的元素,例如:
```javascript
$("input:checkbox:checked")
```
这个选择器将选择所有被选中的复选框。
现在,让我们来实现全选和反选的功能。我们可以使用jquery的.each()方法来遍历所有的复选框,然后使用prop()方法来设置checked属性:
```javascript
$.fn.checkCbx = function(){
return this.each(function(){
this.checked = !this.checked;
});
}
```
这个函数将 toggles 复选框的选中状态,即如果复选框已经被选中,则将其取消选中,否则将其选中。
接下来,让我们来实现全选按钮的功能。当用户点击全选按钮时,我们使用jquery的.click()方法来绑定事件处理函数:
```javascript
$("#btnSelect").click(function(){
this.value = this.value == "全选"?"反选":"全选";
$("input:checkbox").checkCbx();
})
```
这个函数将 toggles 全选按钮的文本,并使用我们之前定义的checkCbx()函数来 toggles 所有的复选框。
让我们来看一下HTML代码:
```html
<form name="form1" method="post" action="Default8.aspx" id="form1">
<table border="1">
<tr>
<th>选择</th>
<th>id</th>
<th>姓名</th>
</tr>
<tr>
<td><input type="checkbox" name="cbx"></td>
<td>1</td>
<td>我们</td>
</tr>
<tr>
<td><input type="checkbox" name="cbx"></td>
<td>2</td>
<td>我们</td>
</tr>
<tr>
<td><input type="checkbox" name="cbx"></td>
<td>3</td>
<td>我们</td>
</tr>
</table>
</form>
```
这个HTML代码定义了一个表单,包含三个复选框和一个全选按钮。当用户点击全选按钮时,所有的复选框将被选中或取消选中。
这个示例展示了如何使用jquery来实现全选和反选的功能,并使用jquery的.each()方法和prop()方法来 toggles 复选框的选中状态。