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

  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. svg转png

    svg转png网络上常用的方式有两种: 1.直接转base64放到图片src进行显示,测试效果不佳,始终报方法问题. 2.先转canvas,再转为png图,测试效果可以但svg透明背景到了canvas ...

  2. Java 中 Gson的使用

    JSON 是一种文本形式的数据交换格式,它比XML更轻量.比二进制容易阅读和编写,调式也更加方便;解析和生成的方式很多,Java中最常用的类库有:JSON-Java.Gson.Jackson.Fast ...

  3. JDK1.7 的 HashMap

    HashMap是一个用于存储key-value的键值对集合,每个键值对都是一个Entry.这些键值对分散存储在一个数组中,这个数组就是HashMap的主干. HashMap每个初始值都为null. 1 ...

  4. Android向系统日历中添加日程事件

    转自Android向系统日历中添加日程事件 总结 在项目开发中,我们有预约提醒.定时提醒需求时,可以使用系统日历来辅助提醒: 通过向系统日历中写入事件.设置提醒方式(闹钟),实现到时间自动提醒的功能: ...

  5. django 数据库查询 ORM

    实用的logging模块: zaisetting配置中加入下列配置,将sql语句打印到屏幕上,可以进行查看. LOGGING = { 'version': 1, 'disable_existing_l ...

  6. Flannel网络插件配置

    # ps -ef|grep docker|grep bip FLANNEL_OPTIONS="-ip-masq=true" -ip-masq=true 这个参数的目的是让flann ...

  7. linux shell并发执行命令

    一般我们在linux上十一shell命令的批量执行操作,一般使用for或者while 循环进行操作,但是这样有一个问题,for或者while本质上是串行的,并不能,如果某一个命令执行耗费的时间比较长, ...

  8. Shapley值的一个应用

    看书有这样一个问题,某互联网公司今天需要加班,需要编写一个500行的程序代码,产品经理找了三个程序员来完成.按照完成量发奖金:1号普通程序员独立能写100行,2号大神程序员独立能写125行,3号美女程 ...

  9. HDU-1078.FatMouseandCheese(线性dp + dfs)

    本题大意:在一个n * n的迷宫内进行移动,左上角为初始位置,每次可以走的步数不能超过m,并且每次走的方格上面的数字要大于前一次走的放个数字,不能走到格子外面,问如何能使得到的数字和最大. 本题思路: ...

  10. linux环境下tomcat安装

    1.安装tomcat前安装jdk(前提下) 2.下载安装包apache-tomcat-8.0.36.tar.gz    解压:tar -zxvf apache-tomcat-8.0.36.tar.gz ...