摘要：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. 网页提交中文到WEB容器的经历了些什么过程....
			
    先准备一个网页 <html><meta http-equiv="Content-Type" content="text/html; charset=gb ...
    
			
    2. 
						
  2. 理解CSS视觉格式化
			
    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
    
			
    3. 
						
  3. 再谈CAAnimation动画
			
    CAAnimaton动画分为CABasicAnimation & CAKeyframeAnimation CABasicAnimation动画, 顾名思义就是最基本的动画, 老规矩先上代码:  ...
    
			
    4. 
						
  4. ASP.NET Core应用针对静态文件请求的处理[2]: 条件请求与区间请求
			
    通过调用ApplicationBuilder的扩展方法UseStaticFiles注册的StaticFileMiddleware中间件帮助我们处理针对文件的请求.对于StaticFileMiddlew ...
    
			
    5. 
						
  5. PHP之GD函数的使用
			
    本文讲解常用GD函数的应用 1.一个简单的图像 我们先看一个例子: <?php $w = 200; $h = 200; $img = imagecreatetruecolor($w,$h); $ ...
    
			
    6. 
						
  6. .NET设计模式访问者模式
			
    一.访问者模式的定义: 表示一个作用于某对象结构中的各元素的操作.它使你可以在不改变各元素类的前提下定义作用于这些元素的新操作. 二.访问者模式的结构和角色: 1.Visitor 抽象访问者角色,为该 ...
    
			
    7. 
						
  7. 程序员必须要知道的Hadoop的一些事实
			
    程序员必须要知道的Hadoop的一些事实.现如今,Apache Hadoop已经无人不知无人不晓.当年雅虎搜索工程师Doug Cutting开发出这个用以创建分布式计算机环境的开源软...... 1: ...
    
			
    8. 
						
  8. 学习C的笔记
			
    [unsigned] 16位系统中一个int能存储的数据的范围为-32768~32767,而unsigned能存储的数据范围则是0~65535.由于在计算机中,整数是以补码形式存放的.根据最高位的不同 ...
    
			
    9. 
						
  9. 初识git版本控制系统
			
    当下git分布式版本控制系统越来越火,掌握git也是必须的一个技能.因此,对git做了如下学习. Git初级指南 1. 先安装git.(ps:在select cmponents处要勾选Git Bash ...
    
			
    10. 
						
  10. 为什么你SQL Server的数据库文件的Date modified没有变化呢？
			
    在SQL Server数据库中,数据文件与事务日志文件的修改日期(Date Modified)是会变化的,但是有时候你会发现你的数据文件或日志文件的修改日期(Date Modified)几个月甚至是半 ...
    
			
    11.