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

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <script src="jquery-1.11.2.min.js"></script><!--引入jquery-1.11.2.min.js要在最上面-->

     </head>

     <body>

         <!--给按钮加个点击事件-->

         <input type="button" value="测试" onclick="test()" />

     </body>

     <script type="text/javascript">

     <!--JS方式加事件-->

         function test()

         {

             alert("aa");

         }

     </script>

 </html>

 点测试结果如下

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <script src="jquery-1.11.2.min.js"></script><!--引入jquery-1.11.2.min.js要在最上面-->

     </head>

     <body>

         <!--给按钮加个点击事件-->

         <input type="button" value="测试" onclick="test()" />

         <!--给下面的按钮加事件用jquery-->

         <input type="button" value="测试2" id="btn" />

     </body>

     <script type="text/javascript">

         function test()

         {

             alert("aa");

         }

 //        只有触发的时候执行

         $(document).ready(function(e) {

 //先找元素用$(测试2id)-用click给前面的按钮加点击事件-执行(function(){}匿名函数因为没有名字

         $("#btn").click(function(){

                 alert("第二个按钮");//点击之后要执行的函数。匿名函数

             })

         });

     </script>

 </html>

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="jquery-1.11.2.min.js"></script>

    </head>

    <body>

            <input type="checkbox" class="ck" value="张店" />张店

            <input type="checkbox" class="ck" value="淄川" />淄川

            <input type="checkbox" class="ck" value="周村" />周村

            <input type="checkbox" class="ck" value="临淄" />临淄

            <input type="checkbox" class="ck" value="博山" />博山

            <input type="button" value="取值" id="quck" />

            <input type="button" value="赋值" id="fuck" />

    </body>

    <script type="text/javascript">

    //复选框所选中的值取出来

        $("#quck").click(function(){

            var ck = $(".ck");

            for(var i=0;i<ck.length;i++)

            {

                //第2种写法用JS方式判断是不是选中 ck[i].checked

                if(ck.eq(i).prop("checked"))

                {

                    alert(ck.eq(i).val());

                }

            }

        })

    </script>

</html>

给周村赋值
$("#fuck").click(function(){

        var zhi = "周村";

        var ck = $(".ck");

        for(var i=0;i<ck.length;i++)

        {

            if(ck.eq(i).val()==zhi)

            {

                ck.eq(i).prop("checked",true);

            }

        }

    })

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

$("#fuck").click(function(){

        var zhi = "周村";

        $("[value='"+zhi+"']").prop("checked",true);

    })




对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. 
						
  2. jquery操作复选框(checkbox)十二技巧
		
    jquery操作复选框(checkbox)的12个小技巧. 1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$( ...
    
		
    3. 
						
  3. jQuery 操作复选框(checkbox) attr checked不起作用
		
    参考资料 http://www.paobuke.com/develop/javascript/pbk849.html   这天用到jQuery功能,想实现一个简单的复选框动态全选或全不选,结果测试发现 ...
    
		
    4. 
						
  4. jQuery操作复选框的简单使用
		
    开发中为了实现一个小功能,就是复选框的相互影响事件,如下图: 就是通过复选框设置权限,权限是分等级的,这是一个web管理系统的应用,一个管理员具有三个权限赋予,权限也是有等级的,其中删除和编辑权限相当 ...
    
		
    5. 
						
  5. jQuery——操作复选框(checkbox) attr checked不起作用
		
    这天用到jQuery功能,想实现一个简单的复选框动态全选或全不选,结果测试发现 attr(‘checked’,'checked’);与attr(‘checked’,true); 都不好使,要么第一次成 ...
    
		
    6. 
						
  6. jquery操作复选框(checkbox)的一些小技巧总结
		
    1.获取单个checkbox选中项(三种写法) //第一种 $("input:checkbox:checked").val() //第二种 $("input:[type= ...
    
		
    7. 
						
  7. Jquery操作复选框(CheckBox)的取值赋值实现代码
		
    赋值 复选框 CheckBox 遍历 取值  1. 获取单个checkbox选中项(三种写法): $("input:checkbox:checked").val() 或者 $(&q ...
    
		
    8. 
						
  8. jquery操作复选框(checkbox)的12个小技巧总结
		
    1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$("input:[type='checkbox']: ...
    
		
    9. 
						
  9. jquery操作复选框(checkbox)
		
    1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$("input:[type='checkbox']: ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【.net 深呼吸】设置序列化中的最大数据量
			
    欢迎收看本期的<老周吹牛>节目,由于剧组严重缺钱,故本节目无视频无声音.好,先看下面一个类声明. [DataContract] public class DemoObject { [Dat ...
    
			
    2. 
						
  2. 前端网络、JavaScript优化以及开发小技巧
			
    一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...
    
			
    3. 
						
  3. WPF 有用博客地址
			
    增加智能感知的RichTextBox扩展控件(WPF) WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式.水印.Label标签. ...
    
			
    4. 
						
  4. 算法与数据结构(十四) 堆排序 (Swift 3.0版)
			
    上篇博客主要讲了冒泡排序.插入排序.希尔排序以及选择排序.本篇博客就来讲一下堆排序(Heap Sort).看到堆排序这个名字我们就应该知道这种排序方式的特点,就是利用堆来讲我们的序列进行排序.&quo ...
    
			
    5. 
						
  5. android studio 使用 jni 编译 opencv 完整实例 之 图像边缘检测！从此在andrid中自由使用 图像匹配、识别、检测
			
    目录: 1,过程感慨: 2,运行环境: 3,准备工作: 4,编译 .so 5,遇到的关键问题及其解决方法 6,实现效果截图. (原创:转载声明出处:http://www.cnblogs.com/lin ...
    
			
    6. 
						
  6. ADO.NET编程之美----数据访问方式(面向连接与面向无连接)
			
    最近,在学习ADO.NET时,其中提到了数据访问方式:面向连接与面向无连接.于是,百度了一下,发现并没有很好的资料,然而,在学校图书馆中发现一本好书(<ASP.NET MVC5 网站开发之美&g ...
    
			
    7. 
						
  7. Win10命令提示符(cmd)怎么复制粘贴
			
    在Win10系统里右键开始菜单,选择弹出菜单里的命令提示符,如下图所示: 然后复制要粘贴的文字,例如: echo hovertree.com 把上面的文字复制后,点击命令提示符窗口,然后在命令提示符窗 ...
    
			
    8. 
						
  8. mysql源码包手动安装、配置以及测试（亲测可行）
			
    笔记编者:小波/qq463431476博客首页:http://www.cnblogs.com/xiaobo-Linux/ 记下这篇mysql笔记,望日后有用! redhat6采用centos yum源 ...
    
			
    9. 
						
  9. XSS 前端防火墙 —— 可疑模块拦截
			
    上一篇介绍的系统,已能预警现实中的大多数 XSS 攻击,但想绕过还是很容易的. 由于是在前端防护,策略配置都能在源代码里找到,因此很快就能试出破解方案.并且攻击者可以屏蔽日志接口,在自己电脑上永不发出 ...
    
			
    10. 
						
  10. CSS currentColor 变量的使用
			
    CSS中存在一个神秘的变量,少有人知自然也不怎么为人所用.它就是crrentColor变量(或者说是CSS关键字,但我觉得称为变量好理解些). 初识 它是何物?具有怎样的功效?它从哪里来?带着这些疑问 ...
    
			
    11.