【jQuery】复选框的全选、反选,判断哪些复选框被选中
2015-06-06 10:52
609 查看
本文与《【JavaScript】复选框的全选、反选,判断哪些复选框被选中》(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,同样做到如下的效果:
布局还是同样的布局,只是由于在jQuery框架中,无须再为按钮,指定特定的onclick事件处理函数,直接使用jQuery指定即可:
布局还是同样的布局,只是由于在jQuery框架中,无须再为按钮,指定特定的onclick事件处理函数,直接使用jQuery指定即可:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>全选、反选</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> </head> <body> <button id="selected"/>哪里复选框被选中? </button> <button id="selectAll"/>全选</button> <button id="selectReserve"/>反选</button><br/> 1<input type="checkbox" name="checkBoxGroup" value="1"/><br/> 2<input type="checkbox" name="checkBoxGroup" value="2"/><br/> 3<input type="checkbox" name="checkBoxGroup" value="3"/><br/> 4<input type="checkbox" name="checkBoxGroup" value="4"/><br/> </body> </html>之后在jQuery中,取name为checkBoxGroup的复选框数组,直接可以这样写:$(":checkbox[name='checkBoxGroup']"),当然$("input[type='checkbox'][name='checkBoxGroup']")也行,只是$(":checkbox[name='checkBoxGroup']")代码更加简单,注意checkbox前面的冒号。拿出来的东西是与Javascript的document.getElementsByName("xx")一样,同位复选框数组。只是在jQuery中可以直接利用each去遍历。为复选框设置选中与否使用prop,不要用attr,具体在《【jQuery】对于复选框操作的attr与prop》(点击打开链接)已经说过了。
<script type="text/javascript"> //哪里复选框被选中? $("#selected").click(function(){ var str="被选中的复选框:"; $(":checkbox[name='checkBoxGroup']:checked").each(function(){ str+=$(this).val()+","; }); alert(str); }); //全选 $("#selectAll").click(function(){ $(":checkbox[name='checkBoxGroup']").each(function(){ $(this).prop("checked",true); }); }); //反选 $("#selectReserve").click(function(){ $(":checkbox[name='checkBoxGroup']").each(function(){ $(this).prop("checked",!$(this).prop("checked")); }); }); </script>
相关文章推荐
- 【jQuery】对于复选框操作的attr与prop
- jquery操作滚动条滚动到指定位置
- Jquery几个比较实用,但又让很多人忽略的几个函数
- Jquery几个比较实用,但又让很多人忽略的几个函数
- jQuery笔记(1)
- jQuery中的end()方法
- 推荐几本javascript与jquery的好书
- Jquery核心函数
- JQuery实现图片的动态切换
- jQuery常用的正则表达式
- Jquery退出循环
- JQuery解析XML数据的几个例子
- jQuery Mobile 脚本加载问题
- jquery绝对路径
- 基于jQuery的左滑出现删除按钮
- JQuery设置数据滑动展示效果
- jQuery选择器
- Javascript、Jquery获取浏览器和屏幕各种高度宽度
- 使用 jQuery 创建自己的插件
- jquery 添加事件