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中的deferred使用方法
Mar 27 jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jquery实现图片轮播器
May 23 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
jQuery实现回到顶部效果
Oct 19 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
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
php array的学习笔记
2012/05/10 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
Javascript 读后台cookie代码
2008/09/15 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
python中文编码与json中文输出问题详解
2018/08/24 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
夜班门卫岗位职责
2013/12/09 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
六五普法规划实施方案
2014/03/21 职场文书
元宵节主持词
2014/03/25 职场文书
社会学专业求职信
2014/07/17 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
涨价通知
2015/04/23 职场文书
走近毛泽东观后感
2015/06/04 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
在Docker容器中部署SQL Server
2022/04/11 Servers