摘要：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. 线性判别分析LDA原理总结
			
    在主成分分析(PCA)原理总结中,我们对降维算法PCA做了总结.这里我们就对另外一种经典的降维方法线性判别分析(Linear Discriminant Analysis, 以下简称LDA)做一个总结. ...
    
			
    2. 
						
  2. 旺财速啃H5框架之Bootstrap（四）
			
    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
    
			
    3. 
						
  3. 我为Net狂 ~ 社交平台系列小集合！
			
    微信平台: 我为Net狂(dotNetCrazy) 资源贴吧: http://tieba.baidu.com/f?kw=毒逆天 个人博客: http://dunitian.cnblogs.com/ h ...
    
			
    4. 
						
  4. Could not create SSL connection through proxy serve-svn
			
    RA layer request failedsvn: Unable to connect to a repository at URL xxxxxx 最后:Could not create SSL  ...
    
			
    5. 
						
  5. ASP.NET Core应用针对静态文件请求的处理[4]: DirectoryBrowserMiddleware中间件如何呈现目录结构
			
    和StaticFileMiddleware中间件一样,DirectoryBrowserMiddleware中间本质上还是定义了一个请求地址与某个物理目录之间的映射关系,而目标目录体现为一个FilePr ...
    
			
    6. 
						
  6. Python爬虫小白入门（四）PhatomJS+Selenium第一篇
			
    一.前言 在上一篇博文中,我们的爬虫面临着一个问题,在爬取Unsplash网站的时候,由于网站是下拉刷新,并没有分页.所以不能够通过页码获取页面的url来分别发送网络请求.我也尝试了其他方式,比如下拉 ...
    
			
    7. 
						
  7. css3圆形百分比进度条的实现原理
			
    原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...
    
			
    8. 
						
  8. .NET设计模式访问者模式
			
    一.访问者模式的定义: 表示一个作用于某对象结构中的各元素的操作.它使你可以在不改变各元素类的前提下定义作用于这些元素的新操作. 二.访问者模式的结构和角色: 1.Visitor 抽象访问者角色,为该 ...
    
			
    9. 
						
  9. Spring aop应用之实现数据库读写分离
			
    Spring加Mybatis实现MySQL数据库主从读写分离 ,实现的原理是配置了多套数据源,相应的sqlsessionfactory,transactionmanager和事务代理各配置了一套,如果 ...
    
			
    10. 
						
  10. T-SQL字符串相加之后被截断的那点事
			
    本文出处:http://www.cnblogs.com/wy123/p/6217772.html 字符串自身相加, 虽然赋值给了varchar(max)类型的变量,在某些特殊情况下仍然会被“截断”,这 ...
    
			
    11.