对复选框组的全选、全不选、不全选，获取选中的复选框的值的操作

  1. 点击全选按钮，复选框组全部选中或者全部取消。
  2. 实现全选按钮和复选框组的联动，当复选框组中有一个没有被选中后，那么id=‘checkedAll’的全选按钮应该要取消选中；当复选框组全部选中后，全选按钮也应该被选中。
  3. 获取已选中的复选框的值。
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>对复选框组的全选操作</title>

     <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(function(){

             /*全选

             全选cheched和下方的checkbox按钮的checked是一致的，

             故可用this.checked。

             注意：$(this).checked是错的

             */

             $('#checkedAll').click(function() {

                 $('[name=item]:checkbox').prop('checked', this.checked);

             });

             /*判断复选框的总数，是否和选中的复选框的数量相等

             相等：全选了

             不相等：没有全选

             */

             $('[name=item]:checkbox').click(function() {

                 /*得到的是ul下 name=item 的复选框数组*/

                 var $checkedArray = $('[name=item]:checkbox');

                 /*$checkedArray.filter(':checked') -----> 已经选择的复选框 */

                 $('#checkedAll').prop('checked',$checkedArray.length==$checkedArray.filter(':checked').length);

 　　　　　　　　　　　　

             });

         });

     </script>

     <script type="text/javascript">

         $(function () {

             //获取已选的复选框的值

             var checkedArray = new Array();//放已经选择的checkbox的value

             var count;//已经选择的个数

             $('#btn_submit').click(function() {

                 checkedArray.length=0;

                 count=0;

                 $('[name=item]:checkbox:checked').each(function() {

                     checkedArray.push($(this).val());

                     count++;

                 });

                 if (checkedArray.length==0) {

                     alert("Please check one at least.");

                     return;

                 }

                 confirm("已选复选框的值："+checkedArray+"\n"+"选中的复选框个数："+count);

             });

         })

     </script>

 </head>

 <body>

     <form action="#" method="POST">

         <input type="checkbox" id="checkedAll"><label for="checkedAll">全选</label>

         <ul>

             <li><input type="checkbox" name="item" value="basketball">篮球</li>

             <li><input type="checkbox" name="item" value="football">足球</li>

             <li><input type="checkbox" name="item" value="badminton">羽毛球</li>

             <li><input type="checkbox" name="item" value="pingpong">兵乓球</li>

             <li><input type="checkbox" name="item" value="swimming">游泳</li>

             <li><input type="checkbox" name="item" value="running">跑步</li>

         </ul>

         <button type="button" id="btn_submit" value="提交button">提交</button>

     </form>

 </body>

 </html>

对于代码中的不足，不够简洁的还可以再优化的地方，如果有什么更好的想法和实现方法，欢迎一起交流学习。

Write less, do more.

JQuery对checkbox的操作的更多相关文章

  1. jquery对checkbox的操作汇总

    1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked ...

  2. jQuery获取checkbox选中项等操作及注意事项

    jQuery获取checkbox选中项等操作及注意事项 今天在做一个项目功能时需要显示checkbox选项来让用户进行选择,由于前端不是很熟练,所以做了一个简单的Demo,其中遇到一些小问题,特记录下 ...

  3. JQuery对CheckBox的一些相关操作

    一.通过选择器选取CheckBox: 1.给CheckBox设置一个id属性,通过id选择器选取: <input type="checkbox" name="myB ...

  4. jQuery对checkbox选中和取消选中操作

    最近做项目发现jQuery对checkbox的全选和非全选操作只有第一次生效,以后就不生效了,不知道是不是jQuery版本库的问题,最终找到了一个解决方案: 把原来的下面这两句: $('input') ...

  5. JQuery设置checkbox选中或取消等相关操作

    $("[name='checkbox']").attr("checked",'true');//全选 $("[name='checkbox']&quo ...

  6. jquery对radio和checkbox的操作

    jQuery获取Radio选择的Value值 代码  $("input[name='radio_name'][checked]").val(); //选择被选中Radio的Valu ...

  7. jquery的checkbox,radio,select等方法总结

    jquery的checkbox,radio,和select是jquery操作的一个难点和重点,很多前端新手对其了解不是很透彻.时间久了不用,我在写的时候有时也难免对某些操作支支吾吾,记不清楚,现在,对 ...

  8. Jquery基础之DOM操作

    转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...

  9. jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...

随机推荐

  1. css3兼容性检测工具

    1.   Modernizr  会在Modernizr 会在页面加载后立即检测特性:然后创建一个包含检测结果的 JavaScript 对象,同时在 html 元素加入方便你调整 CSS 的 class ...

  2. WebService . Schema约束

    1. namespace 相当于schema文件的id 2. targetNamespace属性 用来指定schema文件的namespace的值 3. xmlns属性 引入一个约束, 它的值是一个s ...

  3. 201. Spring Boot JNDI：Spring Boot中怎么玩JNDI

      [视频&交流平台] àSpringBoot视频:http://t.cn/R3QepWG à SpringCloud视频:http://t.cn/R3QeRZc à Spring Boot源 ...

  4. Redis 主从集群搭建及哨兵模式配置

    最近搭建了redis集群及哨兵模式,为方便以后查看特此记录下来: 1.Redis安装 2.主从架构 2.1 Redis主从架构图 2.2Redis主从结构搭建 Redis集群不用安装多个Redis,只 ...

  5. c# post 接收传来的文件

    private void UploadFile() { // //......其他代码 // HttpFileCollection files = HttpContext.Current.Reques ...

  6. leetcode20

    public class Solution { Stack<char> S = new Stack<char>(); public bool IsValid(string s) ...

  7. pyqt5.0 GraphicsView框架

    场景(The Scene) QGraphicsScene提供图形视图场景.该场景具有以下职责: 提供用于管理大量图元的快速界面(锅) 将事件传播到每个图元(把螃蟹烧熟了) 管理图元状态,例如选择和焦点 ...

  8. CentOS下安装Docker-CE

    1.安装最新版本的话可以使用阿里云的自动安装脚本: curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun 2.安装指定的 ...

  9. Hibernate 再接触 一级缓存 二级缓存 查询缓存

    缓存 就是把本来应该放在硬盘里的东西放在内存里  将来存内存里读 一级缓存: session缓存 二级缓存: sessionFactory级别的   (适合经常访问,数据量有限,改动不大) 很多的se ...

  10. 坑之mysql 字符串与数字操作

    select "123"+1 = 124; select "1a23"+1 = 2; select "aa23"+1 = 1; select ...