摘要：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. Shell替换
			
    如果表达式中包含特殊字符,Shell 将会进行替换.例如,在双引号中使用变量就是一种替换,转义字符也是一种替换. #!/bin/bash a= echo -e "Value of a is  ...
    
			
    2. 
						
  2. C++ 应用程序性能优化
			
    C++ 应用程序性能优化 eryar@163.com 1. Introduction 对于几何造型内核OpenCASCADE,由于会涉及到大量的数值算法,如矩阵相关计算,微积分,Newton迭代法解方 ...
    
			
    3. 
						
  3. Android线程管理之ThreadLocal理解及应用场景
			
    前言: 最近在学习总结Android的动画效果,当学到Android属性动画的时候大致看了下源代码,里面的AnimationHandler存取使用了ThreadLocal,激起了我很大的好奇心以及兴趣 ...
    
			
    4. 
						
  4. ASP.NET Core应用中如何记录和查看日志
			
    日志记录不仅对于我们开发的应用,还是对于ASP.NET Core框架功能都是一项非常重要的功能特性.我们知道ASP.NET Core使用的是一个极具扩展性的日志系统,该系统由Logger.Logger ...
    
			
    5. 
						
  5. Yeoman 官网教学案例：使用 Yeoman 构建 WebApp
			
    STEP 1:设置开发环境 与yeoman的所有交互都是通过命令行.Mac系统使用terminal.app,Linux系统使用shell,windows系统可以使用cmder/PowerShell/c ...
    
			
    6. 
						
  6. 算法与数据结构(十七) 基数排序(Swift 3.0版)
			
    前面几篇博客我们已经陆陆续续的为大家介绍了7种排序方式,今天博客的主题依然与排序算法相关.今天这篇博客就来聊聊基数排序,基数排序算法是不稳定的排序算法,在排序数字较小的情况下,基数排序算法的效率还是比 ...
    
			
    7. 
						
  7. zookeeper源码分析之一服务端启动过程
			
    zookeeper简介 zookeeper是为分布式应用提供分布式协作服务的开源软件.它提供了一组简单的原子操作,分布式应用可以基于这些原子操作来实现更高层次的同步服务,配置维护,组管理和命名.zoo ...
    
			
    8. 
						
  8. 一款开源免费的.NET文档操作组件DocX（.NET组件介绍之一）
			
    在目前的软件项目中,都会较多的使用到对文档的操作,用于记录和统计相关业务信息.由于系统自身提供了对文档的相关操作,所以在一定程度上极大的简化了软件使用者的工作量. 在.NET项目中如果用户提出了相关文 ...
    
			
    9. 
						
  9. unity 3d 解析 json
			
    官网案例传送门 我这里不过是借花献佛,案例官网就有. using UnityEngine; using System.Collections; public class json : MonoBeha ...
    
			
    10. 
						
  10. php cryptr 加密函数
			
    class CryptHelper { /** * 加密 * @param unknown $password * @param unknown $salt * @return string */ p ...
    
			
    11.