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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 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 管理系统程序中的后门
2009/08/05 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
在Python中使用HTML模版的教程
2015/04/29 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
2014新年元旦活动策划方案
2014/02/18 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
青年文明号服务承诺
2014/03/31 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
初三新学期计划书
2014/05/03 职场文书
岗位聘任协议书
2015/09/21 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
动画「半妖的夜叉姬」新BD特典图公开
2022/03/22 日漫
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python