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

  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. #161: 给定n*n由0和1组成的矩阵，如果矩阵的每一行和每一列的1的数量都是偶数，则认为符合条件。 你的任务就是检测矩阵是否符合条件

    试题描述 给定n*n由0和1组成的矩阵,如果矩阵的每一行和每一列的1的数量都是偶数,则认为符合条件. 你的任务就是检测矩阵是否符合条件,或者在仅改变一个矩阵元素的情况下能否符合条件. "改变 ...

  2. 实战ELK（6）使用logstash同步mysql数据到ElasticSearch

    一.准备 1.mysql 我这里准备了个数据库mysqlEs,表User 结构如下 添加几条记录 2.创建elasticsearch索引 curl -XPUT 'localhost:9200/user ...

  3. scrollview嵌套recyclerview显示不全现象

    只需在recyclerview的外层加入一个父布局就好了 <RelativeLayout android:layout_width="match_parent" androi ...

  4. Reboot-less node fencing in Oracle Clusterware 11g Release 2

    在进行一次RAC的高可用性测试时,当private网卡的网线被拔掉之后,没有出现传说中的有一个节点被CRS强制重启,取而代之的是node2上面的ASM实例和RDBMS实例被关闭:当网线被重新插上时,n ...

  5. 牛客网-乌龟跑步-（四维dfs）

    链接:https://ac.nowcoder.com/acm/problem/15294来源:牛客网 题目描述 有一只乌龟,初始在0的位置向右跑. 这只乌龟会依次接到一串指令,指令T表示向后转,指令F ...

  6. WordConut

    一.代码地址:https://gitee.com/cainiaoY/WordCount 二.代码: import java.io.*; import java.util.regex.*; public ...

  7. java-web的请求和响应机制中的request请求

     1 Request对象和Response对象的原理 1.1  都是由服务器创建的  我们使用它 1.2 Request对象  是获取请求消息 response对象是响应 2 request 对象的继 ...

  8. SpringMVC 重定向和请求转发（转载）

    本文系转载,原文地址:https://blog.csdn.net/m0_37450089/article/details/78703366   servlet的请求转发(forward)和重定向(se ...

  9. "Web Scraping with Python"笔记（一）

    1.  合法性:抓取的数据用于个人使用,不存在问题:数据用于转载,需注意抓取的数据类型. 一般情况,抓取的真实数据(营业地址,电话清单等)允许转载.而原创数据(比如意见和评论)受版权限制不能转载. 2 ...

  10. 333. Largest BST Subtree节点数最多的bst子树

    ［抄题］: Given a binary tree, find the largest subtree which is a Binary Search Tree (BST), where large ...