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

  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. Centos6搭建sftp服务器

    一.创建sftp相关用户和目录 [root@mail samba]# useradd -s /sbin/nologin -M sftp_user #创建一个系统用户,按需设置登录的shell和家目录 ...

  2. 团队第二次 # scrum meeting

    github 本此会议项目由PM召开,召开时间为4-3日晚上9点 召开时长15分钟 任务表格 袁勤 学习SpringBoot https://github.com/buaa-2016/phyweb/i ...

  3. python3 kmp 字符串匹配

    先声明,本人菜鸟一个,写博客是为了记录学习的过程,以及自己的理解和心得,可能有的地方写的不好,希望大神指出... 抛出问题 给定一个文本串test_str(被匹配的字符串)和模式串pat_str(需要 ...

  4. [持续交付实践] pipeline使用：项目样例

    项目说明 本文将以一个微服务项目的具体pipeline样例进行脚本编写说明.一条完整的pipeline交付流水线通常会包括代码获取.单元测试.静态检查.打包部署.接口层测试.UI层测试.性能专项测试( ...

  5. 保持ssh连接长时间不断开的技巧

    我经常用ssh连接服务器,过段时间不用, 需要恢复一下断开的连接, 原因是NAT防火墙喜欢对空闲的会话进行超时处理,以确保它们状态表的干净和内存的低占用率,因为 长时间保持连接, 会长期占用部分系统资 ...

  6. spring boot报Unsupported Media Type Content type '*/*;charset=UTF-8' not supported

    1.请求设置Content-Type:application/json即可 ajax一般默认:Content-Type: application/x-www-form-urlencoded;chars ...

  7. leetcode322

    public class Solution { public int coinChange(int[] coins, int amount) { ) ; ]; dp[] = ; ;i <= am ...

  8. ES6原生Class

    es5 之前定义构造函数的方法 // 先定义一个函数,强行叫它构造函数,大写的P也不是必须的,只是约定俗成 function Point(x, y) { this.x = x; // 构造函数的属性都 ...

  9. 早期自学jQuery-二事件

    本节目录 ----------①鼠标事件 ----------②键盘事件 ----------③表单事件 ----------④文档窗口事件 ----------⑤举例,按下回车键触发事件 事件函数 ...

  10. txt,csv,json互相转化

    也没啥,记下来怕忘了.说明都在代码里面: 麻蛋,这个着色好难看 import csv import json #从txt变为csv student_txt=[]; with open("st ...