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中map函数的两种方式
Apr 07 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jQuery 动画与停止动画效果实例详解
May 19 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计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
angular动态表单制作
2018/02/23 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
JavaScript常用工具方法封装
2019/02/12 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
Python中实现结构相似的函数调用方法
2015/03/10 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
详解django自定义中间件处理
2018/11/21 Python
Python类装饰器实现方法详解
2018/12/21 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
八一演出活动方案
2014/02/03 职场文书
企业文化标语口号
2014/06/09 职场文书
授权委托书
2014/09/17 职场文书
草房子读书笔记
2015/06/29 职场文书
中学政教处工作总结
2015/08/13 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers