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 相关文章推荐
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 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
老照片 - 几十年前的收音机与人
2021/03/02 无线电
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
通过DOM脚本去设置样式信息
2010/09/19 Javascript
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
vue轻量级框架无法获取到vue对象解决方法
2019/05/12 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
python处理二进制数据的方法
2015/06/03 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
python 编写简单网页服务器的实例
2018/06/01 Python
使用pip安装python库的多种方式
2019/07/31 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
python import 上级目录的导入
2020/11/03 Python
工作疏忽检讨书
2014/01/25 职场文书
创业计划书的写作技巧及要点
2014/01/31 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
授权委托书格式范文
2014/08/02 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python