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实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
PHP操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
各种快递查询--Api接口
2016/04/26 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
Python编程之多态用法实例详解
2015/05/19 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
校庆活动策划方案
2014/06/05 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
大学生村官入党自传
2015/06/26 职场文书
如何用JavaScipt测网速
2021/05/09 Javascript