jquery操作checkbox的常用方法总结【附测试源码下载】


Posted in jQuery onJune 10, 2019

本文实例讲述了jquery操作checkbox的常用方法。分享给大家供大家参考,具体如下:

做系统的过程中,与checkbox 复选框打交道,是难免的,而且在每个系统中,简直是必不可少的一道菜,通常的操作有一下几种:

1.用jquery 全部选择checkbox
2.用jquery 全部取消checkbox
3.用jquery 实现checkbox 反选
4.用jquery 获取所有已选择checkbox的值。

现在将这些常用的操作总结在一个例子中,方便以后查询,不愿意看代码的,也可以下载源码运行测试。

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>yihaomen.com jquery checkbox 测试</title>
  <link rel="stylesheet" type="text/css" href="/static/css/global.css" rel="external nofollow" >
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    $(function() {
       /*全选或全不选*/
      $("#controlall").click(function() {
        $('input[name="selectdivision"]').attr("checked",this.checked);
      });
      var $subBox = $("input[name='selectdivision']");
      $subBox.click(function(){
          $("#controlall").attr("checked",$subBox.length == $("input[name='selectdivision']:checked").length ? true : false);
      });
      /*反选*/
      var reverseBtn=$('#reverseselect');
      reverseBtn.click(function(){
         $("[name='selectdivision']").each(function(){
          if($(this).attr("checked"))
          {
            $(this).removeAttr("checked");
          }
          else
          {
            $(this).attr("checked",'true');
          }
         })
      });
      /*得到所有值*/
      var getvalueBtn=$('#getValButton');
      getvalueBtn.click(function(){
          var val_array=[];
                 $("input:checkbox[name=selectdivision]:checked").each(function(){
                   val_array.push(parseInt($(this).val()));
                 });
                 alert(val_array.join());
      });
    });
</script>
</head>
<body>
<div>
  <table style="border:1px dashed #ccc;margin-top:5px;" class="crmgrid_popwindow" id="division_table">
     <tr style="background-color:#F9F9F9;">
      <td><input type="checkbox" id="controlall" name="controlall" />全选/全不选</td>
      <td>
         <input type="button" id="reverseselect" value="反选" />
         <input type="button" id="getValButton" value="得到选择的值" />
        </td>
     </tr>
     <tr>
      <td><input type="checkbox" name="selectdivision" value="1"/></td>
      <td>1</td>
     </tr>
     <tr>
      <td><input type="checkbox" name="selectdivision" value="2"/></td>
      <td>2</td>
     </tr>
     <tr>
      <td><input type="checkbox" name="selectdivision" value="3"/></td>
      <td>3</td>
     </tr>
     <tr>
      <td><input type="checkbox" name="selectdivision" value="4"/></td>
      <td>4</td>
     </tr>
     <tr>
      <td><input type="checkbox" name="selectdivision" value="5"/></td>
      <td>5</td>
     </tr>
     <tr>
      <td><input type="checkbox" name="selectdivision" value="6"/></td>
      <td>6</td>
     </tr>
  </table>
</div>
</body>
</html>

源码点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 #jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 #jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 #jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 #jQuery
jQuery操作cookie的示例代码
Jun 05 #jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 #jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 #jQuery
You might like
php 中英文语言转换类
2011/09/07 PHP
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
php使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
详解详解Python中writelines()方法的使用
2015/05/25 Python
Python全局变量用法实例分析
2016/07/19 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
windows下python安装pip方法详解
2020/02/10 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
介绍一下mysql的日期和时间函数
2013/03/28 面试题
教师推荐信范文
2013/11/24 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB