摘要：jquery操作复选框。使用更简洁易懂，思路清晰，逻辑更明了，很实用

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title></title>
  6.          <script src="jquery-1.11.2.min.js"></script><!--引入jquery-1.11.2.min.js要在最上面-->
  7.      </head>
  8.      <body>
  9.          <!--给按钮加个点击事件-->
  10.          <input type="button" value="测试" onclick="test()" />
  11.  
  12.      </body>
  13.      <script type="text/javascript">
  14.      <!--JS方式加事件-->
  15.          function test()
  16.          {
  17.              alert("aa");
  18.          }
  19.  
  20.      </script>
  21.  </html>
  22.  点测试结果如下

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title></title>
  6.          <script src="jquery-1.11.2.min.js"></script><!--引入jquery-1.11.2.min.js要在最上面-->
  7.      </head>
  8.      <body>
  9.          <!--给按钮加个点击事件-->
  10.          <input type="button" value="测试" onclick="test()" />
  11.          <!--给下面的按钮加事件用jquery-->
  12.          <input type="button" value="测试2" id="btn" />
  13.      </body>
  14.      <script type="text/javascript">
  15.          function test()
  16.          {
  17.              alert("aa");
  18.          }
  19.  
  20.  //        只有触发的时候执行
  21.          $(document).ready(function(e) {
  22.  //先找元素用$(测试2id)-用click给前面的按钮加点击事件-执行(function(){}匿名函数因为没有名字
  23.          $("#btn").click(function(){
  24.                  alert("第二个按钮");//点击之后要执行的函数。匿名函数
  25.              })
  26.  
  27.          });
  28.  
  29.      </script>
  30.  </html>

Jquery把复选框所选中的值取出来

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script src="jquery-1.11.2.min.js"></script>
  7.     </head>
  8.     <body>
  9.  
  10.             <input type="checkbox" class="ck" value="张店" />张店
  11.             <input type="checkbox" class="ck" value="淄川" />淄川
  12.             <input type="checkbox" class="ck" value="周村" />周村
  13.             <input type="checkbox" class="ck" value="临淄" />临淄
  14.             <input type="checkbox" class="ck" value="博山" />博山
  15.  
  16.             <input type="button" value="取值" id="quck" />
  17.             <input type="button" value="赋值" id="fuck" />
  18.  
  19.     </body>
  20.     <script type="text/javascript">
  21.     //复选框所选中的值取出来
  22.         $("#quck").click(function(){
  23.             var ck = $(".ck");
  24.             for(var i=0;i<ck.length;i++)
  25.             {
  26.                 //第2种写法用JS方式判断是不是选中 ck[i].checked
  27.                 if(ck.eq(i).prop("checked"))
  28.                 {
  29.                     alert(ck.eq(i).val());
  30.                 }
  31.             }
  32.         })
  33.     </script>
  34. </html>

  1. 给周村赋值
    $("#fuck").click(function(){
  2.         var zhi = "周村";
  3.         var ck = $(".ck");
  4.         for(var i=0;i<ck.length;i++)
  5.         {
  6.             if(ck.eq(i).val()==zhi)
  7.             {
  8.                 ck.eq(i).prop("checked",true);
  9.             }
  10.         }
  11.     })

第二种方法拼接 给周村赋值

  1. $("#fuck").click(function(){
  2.         var zhi = "周村";
  3.         $("[value='"+zhi+"']").prop("checked",true);
  4.  
  5.     })
  1.  

对jquery操作复选框(checkbox)的12个小技巧进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助

1、获取单个checkbox选中项(三种写法)
$("input:checkbox:checked").val()
或者
$("input:[type='checkbox']:checked").val();
或者
$("input:[name='ck']:checked").val();

2、 获取多个checkbox选中项
$('input:checkbox').each(function() {
        if ($(this).attr('checked') ==true) {
                alert($(this).val());
        }
});

3、设置第一个checkbox 为选中值
$('input:checkbox:first').attr("checked",'checked');
或者
$('input:checkbox').eq(0).attr("checked",'true');

4、设置最后一个checkbox为选中值
$('input:radio:last').attr('checked', 'checked');
或者
$('input:radio:last').attr('checked', 'true');

5、根据索引值设置任意一个checkbox为选中值
$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked', 'true');

6、选中多个checkbox同时选中第1个和第2个的checkbox
$('input:radio').slice(0,2).attr('checked','true');

7、根据Value值设置checkbox为选中值
$("input:checkbox[value='1']").attr('checked','true');

8、删除Value=1的checkbox
$("input:checkbox[value='1']").remove();

9、删除第几个checkbox
$("input:checkbox").eq(索引值).remove();索引值=0,1,2....
如删除第3个checkbox:
$("input:checkbox").eq(2).remove();

10、遍历checkbox
$('input:checkbox').each(function (index, domEle) {
//写入代码
});

11、全部选中
$('input:checkbox').each(function() {
        $(this).attr('checked', true);
});

12、全部取消选择
$('input:checkbox').each(function () {
        $(this).attr('checked',false);
});

对jquery操作复选框的更多相关文章

  1. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  2. jquery操作复选框(checkbox)十二技巧

    jquery操作复选框(checkbox)的12个小技巧. 1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$( ...

  3. jQuery 操作复选框(checkbox) attr checked不起作用

    参考资料 http://www.paobuke.com/develop/javascript/pbk849.html   这天用到jQuery功能,想实现一个简单的复选框动态全选或全不选,结果测试发现 ...

  4. jQuery操作复选框的简单使用

    开发中为了实现一个小功能,就是复选框的相互影响事件,如下图: 就是通过复选框设置权限,权限是分等级的,这是一个web管理系统的应用,一个管理员具有三个权限赋予,权限也是有等级的,其中删除和编辑权限相当 ...

  5. jQuery——操作复选框(checkbox) attr checked不起作用

    这天用到jQuery功能,想实现一个简单的复选框动态全选或全不选,结果测试发现 attr(‘checked’,'checked’);与attr(‘checked’,true); 都不好使,要么第一次成 ...

  6. jquery操作复选框(checkbox)的一些小技巧总结

    1.获取单个checkbox选中项(三种写法) //第一种 $("input:checkbox:checked").val() //第二种 $("input:[type= ...

  7. Jquery操作复选框(CheckBox)的取值赋值实现代码

    赋值 复选框 CheckBox 遍历 取值  1. 获取单个checkbox选中项(三种写法): $("input:checkbox:checked").val() 或者 $(&q ...

  8. jquery操作复选框(checkbox)的12个小技巧总结

    1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$("input:[type='checkbox']: ...

  9. jquery操作复选框(checkbox)

    1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$("input:[type='checkbox']: ...

随机推荐

  1. 通过三次优化，我将gif加载优化了16.9%

    WeTest 导读 现在app越来越炫,动不动就搞点动画,复杂的动画用原生实现起来挺复杂,如是就搞起gif播放动画的形式,节省开发成本.   背 景 设计同学准备给一个png序列,开发读取png序列, ...

  2. Android带加减的edittext

    看了网上这样自带加减的edittext写得好复杂,还有各种监听事件,我觉得没有必有.于是我自己写了一个. 我这个edittext仅仅限制整数,每次加减1. public class TestEditT ...

  3. SQL Server2016升级前几点自检

    SQL Server2016已经出来一段时间了,而且最新的SP1包也于2016年11月18日正式发布,各种新的特性推出让我们跃跃欲试.那么对于我们真实的业务环境,特别是生产环境要不要"跟风& ...

  4. 前端MVC学习总结（一）——MVC概要与angular概要、模板与数据绑定

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...

  5. MongoDB系列（一）：简介及安装

    什么是MongoDB MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性能. MongoDB 旨在为应用提供可扩展的高 ...

  6. 模仿Linux内核kfifo实现的循环缓存

    想实现个循环缓冲区(Circular Buffer),搜了些资料多数是基于循环队列的实现方式.使用一个变量存放缓冲区中的数据长度或者空出来一个空间来判断缓冲区是否满了.偶然间看到分析Linux内核的循 ...

  7. [原创]java使用JDBC向MySQL数据库批次插入10W条数据测试效率

    使用JDBC连接MySQL数据库进行数据插入的时候,特别是大批量数据连续插入(100000),如何提高效率呢?在JDBC编程接口中Statement 有两个方法特别值得注意:通过使用addBatch( ...

  8. Java实现Excel中的NORMSDIST函数和NORMSINV函数

    由于工作中需要将Excel中的此两种函数转换成java函数,从而计算内部评级的资本占用率和资本占用金额.经过多方查阅资料和整理,总结出如下两个转换方法 标准正态分布累计函数NORMSDIST: pub ...

  9. 【Update】C# 批量插入数据 SqlBulkCopy

    SqlBulkCopy的原理就是通过在客户端把数据都缓存在table中,然后利用SqlBulkCopy一次性把table中的数据插入到数据库中. SqlConnection sqlConn = new ...

  10. linux下使用shell 自动执行脚本文件

    以下实例本人在Centos6.5 64位操作系统中使用 一.定时复制文件 a.在/usr/local/wfjb_web_back目录下创建 tomcatBack.sh文件 文件内容: #将tomcat ...