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

  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. redis基本知识

    启动redis: redis-sever 检查redis是否在运行: redis-cli 再ping 会提示PONG 启动远程redis:redis-cli -h 127.0.0.1 -p 6379 ...

  2. 63.(原65)纯 CSS 创作一个摇摇晃晃的 loader

    原文地址:https://segmentfault.com/a/1190000015424389 修改后地址:https://scrimba.com/c/cqKv4VCR HTML code: < ...

  3. Azkaban安装及分布式部署（multiple-executor）

    参考文章:https://blog.csdn.net/weixin_35852328/article/details/79327996 官网:https://azkaban.readthedocs.i ...

  4. vue安装搭建

    title: vue安装搭建 date: 2018-04-21 14:00:03 tags: [vue] --- 安装 首先安装nodejs 直接官网下载最新版本http://nodejs.cn/do ...

  5. 2018年秋季学期面向对象程序设计（JAVA）课程总结

    2018年秋季学期面向对象程序设计(JAVA)课程总结 时值2018年年末,按惯例对本学期教学工作小结如下: 1. 教学资源与教学辅助平台 教材:凯 S.霍斯特曼 (Cay S. Horstmann) ...

  6. xml文件中&符号需要转义为&amp;

    xml文件中&符号需要转义为&

  7. Full authentication is required to access this resource

    参考 https://www.jianshu.com/p/d10e0cee4adb security.basic.enabled=false

  8. 10. Regular Expression Matching (JAVA)

    Given an input string (s) and a pattern (p), implement regular expression matching with support for ...

  9. windows 活动目录双向信任配置

    活动目录A:ess.com 192.168.1.20/24 活动目录B:ups.com  192.168.1.30/24 Step1:在活动目录B的域控制器上配置域的林双向信任关系,并且可传递,如下图 ...

  10. python note 06 编码方式

    1.有如下值li= [11,22,33,44,55,66,77,88,99,90],将所有大于 66 的值保存至字典的第一个key中,将小于 66 的值保存至第二个key的值中.即: {'k1': 大 ...