jQuery实现checkbox全选反选及删除等操作
运行效果:
1.list.html
说明:用checkbox数组Check[]存放每一行的ID值
复制代码
1 <div id="con">
2 <table width="100%" cellspacing="1" cellpadding="0">
3 <tr>
4 <th><input id="CheckAll" name='CheckAll' type='checkbox'></th>
5 <th>ID</th>
6 <th>Name</th>
7 <th>Date</th>
8 </tr>
9 <tr>
10 <td><input id='Check[]' name='Check[]' type='checkbox' value="1"></td>
11 <td>10001</td>
12 <td>XXX</td>
13 <td>2015-12-01</td>
14 </tr>
15 <tr>
16 <td><input id='Check[]' name='Check[]' type='checkbox' value="2"></td>
17 <td>10002</td>
18 <td>XXX</td>
19 <td>2015-12-02</td>
20 </tr>
21 <tr>
22 <td><input id='Check[]' name='Check[]' type='checkbox' value="3"></td>
23 <td>10003</td>
24 <td>XXX</td>
25 <td>2015-12-03</td>
26 </tr>
27 </table>
28 <div id="bottom">
29 <input id="Delete" name="Delete" type="button" value=" 删 除 " class="btn btn-danger radius"/>
30 </div>
31 </div>
复制代码
2.功能:全选/全不选
说明:如果需要这里还可以根据选择结果显示/隐藏【删除】等按钮
复制代码
1 //全选/全不选
2 $("#CheckAll").bind("click",function(){
3 $("input[name='Check[]']").prop("checked",this.checked);
4 //显示删除按钮
5 /*if(this.checked == true){
6 $("input[name='Delete'").css("display",'block');
7 }else{
8 $("input[name='Delete'").css("display",'none');
9 }*/
10 });
复制代码
3.功能:批量删除
说明:需注意的是在传值的的时候,要把获取的数组checkData转化成字符串checkData.toString()
复制代码
1 //批量删除
2 $("#Delete").click(function(){
3 if(confirm('确定要删除所选吗?')){
4 var checks = $("input[name='Check[]']:checked");
5 if(checks.length == 0){ alert('未选中任何项!');return false;}
6 //将获取的值存入数组
7 var checkData = new Array();
8 checks.each(function(){
9 checkData.push($(this).val());
10 });
11 $.get("<{spUrl c=order a=delete}>",{Check:checkData.toString()},function(result){ if(result = true){ window.location.reload();}});
12 }
13 }
14 });
复制代码
实际应用中往往不仅仅只有批量删除一个操作,通常还有其它的批量操作,我们可以对上面代码优化整合一下,将通用的功能放在一个文件中。
通用文件:jquery.ready.js
说明:因为这一部分较为通用可以放在一个公共的js文件里面,获取checkbox值可以写成一个变量函数
复制代码
1 //获取被选中checkbox值
2 var checked = function(){
3 var checks = $("input[name='Check[]']:checked");
4 if(checks.length == 0){ alert('未选中任何项!');return false;}
5
6 var checkData = new Array();
7 checks.each(function(){
8 checkData.push($(this).val());
9 });
10 return checkData;
11 };
12
13 //全选/全不选
14 $("#CheckAll").bind("click",function(){
15 $("input[name='Check[]']").prop("checked",this.checked);
16 //显示删除按钮
17 /*if(this.checked == true){
18 $("input[name='Delete'").css("display",'block');
19 }else{
20 $("input[name='Delete'").css("display",'none');
21 }*/
22 });
复制代码
list.js
复制代码
1 //批量删除
2 $("#Delete").click(function(){
3 if(val = checked()){
4 if(confirm('确定要删除所选吗?')){
5 $.get("<{spUrl c=order a=delete}>",{Check:val.toString()},function(result){ if(result = true){ window.location.reload();}});
6 }
7 }
8 });
//批量操作...
运行效果:
1.list.html
说明:用checkbox数组Check[]存放每一行的ID值
复制代码
1 <div id="con">
2 <table width="100%" cellspacing="1" cellpadding="0">
3 <tr>
4 <th><input id="CheckAll" name='CheckAll' type='checkbox'></th>
5 <th>ID</th>
6 <th>Name</th>
7 <th>Date</th>
8 </tr>
9 <tr>
10 <td><input id='Check[]' name='Check[]' type='checkbox' value="1"></td>
11 <td>10001</td>
12 <td>XXX</td>
13 <td>2015-12-01</td>
14 </tr>
15 <tr>
16 <td><input id='Check[]' name='Check[]' type='checkbox' value="2"></td>
17 <td>10002</td>
18 <td>XXX</td>
19 <td>2015-12-02</td>
20 </tr>
21 <tr>
22 <td><input id='Check[]' name='Check[]' type='checkbox' value="3"></td>
23 <td>10003</td>
24 <td>XXX</td>
25 <td>2015-12-03</td>
26 </tr>
27 </table>
28 <div id="bottom">
29 <input id="Delete" name="Delete" type="button" value=" 删 除 " class="btn btn-danger radius"/>
30 </div>
31 </div>
复制代码
2.功能:全选/全不选
说明:如果需要这里还可以根据选择结果显示/隐藏【删除】等按钮
复制代码
1 //全选/全不选
2 $("#CheckAll").bind("click",function(){
3 $("input[name='Check[]']").prop("checked",this.checked);
4 //显示删除按钮
5 /*if(this.checked == true){
6 $("input[name='Delete'").css("display",'block');
7 }else{
8 $("input[name='Delete'").css("display",'none');
9 }*/
10 });
复制代码
3.功能:批量删除
说明:需注意的是在传值的的时候,要把获取的数组checkData转化成字符串checkData.toString()
复制代码
1 //批量删除
2 $("#Delete").click(function(){
3 if(confirm('确定要删除所选吗?')){
4 var checks = $("input[name='Check[]']:checked");
5 if(checks.length == 0){ alert('未选中任何项!');return false;}
6 //将获取的值存入数组
7 var checkData = new Array();
8 checks.each(function(){
9 checkData.push($(this).val());
10 });
11 $.get("<{spUrl c=order a=delete}>",{Check:checkData.toString()},function(result){ if(result = true){ window.location.reload();}});
12 }
13 }
14 });
复制代码
实际应用中往往不仅仅只有批量删除一个操作,通常还有其它的批量操作,我们可以对上面代码优化整合一下,将通用的功能放在一个文件中。
通用文件:jquery.ready.js
说明:因为这一部分较为通用可以放在一个公共的js文件里面,获取checkbox值可以写成一个变量函数
复制代码
1 //获取被选中checkbox值
2 var checked = function(){
3 var checks = $("input[name='Check[]']:checked");
4 if(checks.length == 0){ alert('未选中任何项!');return false;}
5
6 var checkData = new Array();
7 checks.each(function(){
8 checkData.push($(this).val());
9 });
10 return checkData;
11 };
12
13 //全选/全不选
14 $("#CheckAll").bind("click",function(){
15 $("input[name='Check[]']").prop("checked",this.checked);
16 //显示删除按钮
17 /*if(this.checked == true){
18 $("input[name='Delete'").css("display",'block');
19 }else{
20 $("input[name='Delete'").css("display",'none');
21 }*/
22 });
复制代码
list.js
复制代码
1 //批量删除
2 $("#Delete").click(function(){
3 if(val = checked()){
4 if(confirm('确定要删除所选吗?')){
5 $.get("<{spUrl c=order a=delete}>",{Check:val.toString()},function(result){ if(result = true){ window.location.reload();}});
6 }
7 }
8 });
//批量操作...