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实现图片轮播器
May 23 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
php jsonp单引号转义
2014/11/23 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
自制简易打赏功能的实例
2017/09/02 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
JS抛物线动画实例制作
2018/02/24 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
Python实现Linux命令xxd -i功能
2016/03/06 Python
python 除法保留两位小数点的方法
2018/07/16 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
Python如何将字符串转换为日期
2020/07/31 Python
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
投标邀请书范文
2014/01/31 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
六一儿童节致辞
2015/07/31 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python
Python数据处理的三个实用技巧分享
2022/04/01 Python
Python中itertools库的四个函数介绍
2022/04/06 Python