在网页开发中,有时我们需要为用户提供全选、全不选和反选的选项,以便于批量操作或筛选数据。在jQuery中,结合原生JavaScript,我们可以实现这些功能。本文将介绍一种实现全选、全不选和反选的jQuery方法。
我们需要引入jQuery库,这里使用的是jQuery 1.6.1版本。在HTML头部添加如下代码:
```html
<script language="javascript" src="../css02/js/jquery-1.6.1.js"></script>
```
接下来,我们需要监听用户对“全选/不选”和“反选”按钮的操作。这可以通过jQuery的`$(document).ready()`函数来实现,当文档加载完成时执行其中的代码:
```javascript
$(document).ready(function(){
// ...
});
```
对于“全选/不选”功能,我们给它一个ID `selectAll`,然后绑定一个点击事件。在点击事件中,我们检查当前复选框(全选按钮)是否被选中,根据其状态决定其他所有复选框(`[name=items]`)的状态:
```javascript
$("#selectAll").click(function(){
if($(this)[0].checked){
$('[name=items]:checkbox').attr("checked",true);
}else{
$('[name=items]:checkbox').attr("checked",false);
}
});
```
这里,`$('[name=items]:checkbox')`选择所有名称为`items`的复选框,`attr("checked",true)`或`attr("checked",false)`设置它们的选中状态。
对于“反选”功能,我们给按钮一个ID `XOR`,同样绑定一个点击事件。在点击事件中,我们遍历所有复选框并改变它们的选中状态,实现反选:
```javascript
$("#XOR").click(function(){
$("[name=items]:checkbox").each(function(){
this.checked=!this.checked;
});
});
```
这里的`each()`函数遍历所有复选框,`this.checked=!this.checked`翻转每个复选框的选中状态。
完整HTML代码如下:
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="../css02/js/jquery-1.6.1.js"></script>
<script>
$(document).ready(function(){
$("#selectAll").click(function(){
if($(this)[0].checked){
$('[name=items]:checkbox').attr("checked",true);
}else{
$('[name=items]:checkbox').attr("checked",false);
}
});
$("#XOR").click(function(){
$("[name=items]:checkbox").each(function(){
this.checked=!this.checked;
});
});
});
</script>
<title>Untitled Document</title>
</head>
<body>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="排球" />排球
<input type="checkbox" name="items" value="网球" />网球
<input type="checkbox" id="selectAll" value="全选/不选"/>全选/全部选
<input type="button" id="XOR" value="反选"/>
</body>
</html>
```
通过这种方式,我们可以为用户提供便捷的全选、全不选和反选功能。这种实现方法结合了jQuery的选择器和事件处理能力以及原生JavaScript的DOM操作,既简单又高效。