当前位置: 代码迷 >> Web前端 >> JQuery兑现checkbox全选、不选、反选
  详细解决方案

JQuery兑现checkbox全选、不选、反选

热度:72   发布时间:2012-11-09 10:18:47.0
JQuery实现checkbox全选、不选、反选

开发过程中,checkbox复选框的全选、不选、反选功能经常用到,例如后台操作多条记录的批量删除,前台兴趣爱好的多项选择等等.

假如现在有三个链接标签,一个实现全选,一个不选,一个反选,onclick的事件分别为:sel_all('1'),sel_all('0'),rev_sel().多项选择复选框的name属性为check_box.事件代码如下:

先在网页头部包含JQuery库文件(jquery是什么?).

查看源代码
打印帮助
01.//全选 、不选
02.function sel_all(checked){
03.????var check_obj = $("input[name='check_box']");
04.????for(var i=0; i<check_obj.length;i++){
05.????????if(checked){
06.????????????check_obj.get(i).checked = true;
07.????????}else{
08.????????????check_obj.get(i).checked = false;
09.????????}
10.????}
11.????return;
12.}
13.??
14.//反选
15.function rev_sel(){
16.????var check_obj = $("input[name='check_box']");
17.????for(var i=0; i<check_obj.length;i++){
18.????????check_obj.get(i).checked = ! check_obj.get(i).checked;
19.????}
20.????return;
21.}
22.??
23.//判断是否至少选择了一项
24.function count_sel(){
25.????var checked_num = $("input[name='check_box']:checked").length;
26.????if(checked_num == 0){
27.?????????alert('请至少选择一项吧!');
28.?????????return;
29.????}
30.????//多项选择后的操作代码(略)
31.}

?

http://www.itpob.cn/thread-10383-1-1.html

  相关解决方案