摘要：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. 恋爱虽易，相处不易：当EntityFramework爱上AutoMapper
			
    剧情开始 为何相爱? 相处的问题? 女人的伟大? 剧情收尾? 有时候相识即是一种缘分,相爱也不需要太多的理由,一个眼神足矣,当EntityFramework遇上AutoMapper,就是如此,恋爱虽易 ...
    
			
    2. 
						
  2. Python高手之路【四】python函数装饰器
			
    def outer(func): def inner(): print('hello') print('hello') print('hello') r = func() print('end') p ...
    
			
    3. 
						
  3. 对Castle Windsor的Resolve方法的解析时new对象的探讨
			
    依赖注入框架Castle Windsor从容器里解析一个实例时(也就是调用Resolve方法),是通过调用待解析对象的构造函数new一个对象并返回,那么问题是:它是调用哪个构造函数呢? 无参的构造函数 ...
    
			
    4. 
						
  4. C# i=0;i=i++，i的值是多少？
			
    昨天看群里dalao们聊天,有一个人出来问这个问题 这个题应该是挺常见的 int i = 0, t;        for(t = 0;t <= 5;t++)        {          ...
    
			
    5. 
						
  5. wordpress多站点配置
			
    wordpress作为全球第一的个人博客搭建平台一直在国内外有着较高的人气,从3.0版本开始就已经支持多站点的搭建.该功能可以让子站点运行主站点的程序,不需要再每个站点分别存放网站程序.最近更新的4. ...
    
			
    6. 
						
  6. video.js
			
    1.github地址 2.常用API: class : video-js: video-js应用视频所需的风格.js功能,比如全屏和字幕. vjs-default-skin: vjs-default- ...
    
			
    7. 
						
  7. 再部署一个 instance 和 Local Network - 每天5分钟玩转 OpenStack（131）
			
    上一节部署了 cirros-vm1 到 first_local_net,今天我们将再部署 cirros-vm2 到同一网络,并创建 second_local_net. 连接第二个 instance 到 ...
    
			
    8. 
						
  8. zookeeper源码分析之二客户端启动
			
    ZooKeeper Client Library提供了丰富直观的API供用户程序使用,下面是一些常用的API: create(path, data, flags): 创建一个ZNode, path是其 ...
    
			
    9. 
						
  9. MyBatis基础入门--知识点总结
			
    对原生态jdbc程序的问题总结 下面是一个传统的jdbc连接oracle数据库的标准代码: public static void main(String[] args) throws Exceptio ...
    
			
    10. 
						
  10. Ajax使用WCF实现小票pos机打印源码
			
    通过ajax跨域方式调用WCF服务,实现小票pos机的打印,源码提供web方式,客户端方式测试,服务驻留右侧底部任务栏,可控制服务开启暂停,用户可自定义小票打印模板,配合零售录入. qq  22945 ...
    
			
    11.