jQuery实现checkbox的简单操作


Posted in jQuery onNovember 18, 2017

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

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>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
基于jquery实现五星好评
Nov 18 #jQuery
jQuery实现滚动效果
Nov 17 #jQuery
基于jQuery实现定位导航位置效果
Nov 15 #jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 #jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 #jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 #jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 #jQuery
You might like
PHP创建自己的Composer包方法
2018/04/09 PHP
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
AngularJS快速入门
2015/04/02 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
python网络爬虫采集联想词示例
2014/02/11 Python
Django小白教程之Django用户注册与登录
2016/04/22 Python
Python调用C# Com dll组件实战教程
2017/10/12 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
德国自行车商店:Tretwerk
2019/06/21 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
入党推优材料
2014/06/02 职场文书
走进敬老院活动总结
2014/07/10 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
监察建议书
2015/02/04 职场文书
期末个人总结范文
2015/02/13 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
光荣之路观后感
2015/06/12 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
python中对列表的删除和添加方法详解
2022/02/24 Python
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android