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插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
jQuery实现全选按钮
Jan 01 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一些公用函数的集合
2008/03/27 PHP
php number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
百度地图API使用方法详解
2015/08/25 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
封装的原生javascript弹出层代码
2010/09/24 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
Python中数字以及算数运算符的相关使用
2015/10/12 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
python3.7.0的安装步骤
2018/08/27 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
远程调用的原理
2014/07/05 面试题
好军嫂事迹材料
2014/01/15 职场文书
学习教师法的心得体会
2014/09/03 职场文书
基于angular实现树形二级表格
2021/10/16 Javascript