复选框选中事件

短命女 2024-03-27 09:37 56阅读 0赞

一.方法

1.jquery判断checked的三种方法:  
.attr('checked); //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false  
.prop('checked'); //16+:true/false  
.is(':checked'); //所有版本:true/false//别忘记冒号哦

2.jquery赋值checked的几种写法:  
所有的jquery版本都可以这样赋值:  
// $("\#cb1").attr("checked","checked");  
// $("\#cb1").attr("checked",true);  
jquery1.6+:prop的4种赋值:  
// $("\#cb1″).prop("checked",true);//很简单就不说了哦  
// $("\#cb1″).prop(\{checked:true\}); //map键值对  
// $("\#cb1″).prop("checked",function()\{  
return true;//函数返回true或false  
\});

//记得还有这种哦:$("\#cb1″).prop("checked","checked");

二.简单操作

1.反选  
$(‘\[name=foods\]:checkbox’).each(function)\{  
$(this).attr(“checked”,!$(this).attr(“checked”));  
或是：  
This.checked=!this.checked ;  
\}

2.全选  
$(‘\[name=foods\]:checkbox’).attr(‘checkbox’,’true’);  
$(‘\[name=foods\]:checkbox’).attr(‘checkbox’,’false’); //全不选

3.选中的个数  
$(‘\[name=foods\]:checkbox:checkbox’).each(function)\{  
Str =$(this).val();  
\}

4.选中删除  
$ (".del").click(function()\{  
$ (":checked").parent().parent().remove();  
//隐藏所有被选中的input元素  
/ /parent() 获得当前匹配元素集合中每个元素的父元素,  
\})

5.全选/全不选  
$('\#check-all1').click(function(event)\{  
if($(this).prop("checked") == true)\{  
$(this).parent().parent().parent().find("input\[name='items'\]").prop("checked", true);  
\}else\{  
$(this).parent().parent().parent().find("input\[name='items'\]").prop("checked", false);  
\}  
\})

6.全选/全不选(checkedALL)（当一个foods复选框没有选择时，这个复选框就没有打勾）  
$ ("input\[name='items'\]").click(function()\{  
var $tmp=$ ("input\[name='items'\]");  
if($tmp.length==$tmp.filter(':checked').length)\{  
$ ('.check-all').attr('checked',true);  
\}else\{  
$ ('.check-all').attr('checked',false);  
\}

\});

三.例子

![20170714094804961][]

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
    html,body,div,ul,li,button,label{
    	margin: 0;
    	padding: 0;
    }
    a{text-decoration: none;}
    .formcnt{
    	width: 200px;
    	margin:50px auto;
    }
    .formcnt-row{
    	width: 100%;
    	margin-bottom: 10px;
    }
    .all-btn{
        width: 65px;
        text-align: center;
        background: #ffa800;
        color: #fff;
        line-height: 30px;
        display: inline-block;
        border-radius: 5px;
    }
    .all-btn>label{
        display: inline-block;
        width: 100%;
    }
    .del-btn{
        width: 70px;
        background: #ccc;
        line-height: 30px;
        text-align: center;
        display: inline-block;
    }
    </style>
    </head>
    <body>
    <form action="" method="get" class="formcnt"> 
    	<h2>您喜欢的水果？</h2>
    	<div class="formcnt-row"><label><input name="Fruit" type="checkbox" value="" />苹果 </label></div> 
    	<div class="formcnt-row"><label><input name="Fruit" type="checkbox" value="" />桃子 </label></div>  
    	<div class="formcnt-row"><label><input name="Fruit" type="checkbox" value="" />香蕉 </label> </div> 
    	<div class="formcnt-row"><label><input name="Fruit" type="checkbox" value="" />梨 </label> </div> 
    	<div class="btncnt">
    		<div class="all-btn">
    			<label><input class="all-check" name="all" type="checkbox" value="" />全选 </label>
    		</div>
    		<div class="del-btn">删除</div>
    	</div>
    	
    	
    </form> 
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	 $('.formcnt').each(function(){
    	    var _this=$(this);
    	    //全选
    	    $(_this).find('.all-check').click(function(){
    	        if($(this).is(':checked')){
    	            $(_this).find("input[name='Fruit']").each(function(i,k){
    	                $(k).prop('checked',true);
    	            })
    	        }else{
    	            $(_this).find("input[name='Fruit']").each(function(i,k){
    	                $(k).prop('checked',false);
    	            })
    	        }
    	    })
    	    //复选框单击
    	    $(_this).find('.formcnt-row label').each(function(){
    	        $(this).click(function(){
    	            var  $tmp=$(this).parent().parent().find("input[name='Fruit']");
    	            if($tmp.length==$tmp.filter(':checked').length){
    	                $(_this).find('.all-check').prop('checked',true);
    	            }else{
    	                $(_this).find('.all-check').prop('checked',false);
    	            }  
    	        });
    	    })
    	    $ (".del-btn").click(function(){
                      $(_this).find('.formcnt-row label input:checked').parent().parent().remove(); 
    			//隐藏所有被选中的input元素
    			 //parent() 获得当前匹配元素集合中每个元素的父元素,
               })
     
    	});
    });
    </script>
    </body>
    </html>

[20170714094804961]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/22d1ff5b437141f09ae07fe79746fa52.png