复选框选中事件

Bertha 。 2021-09-13 14:52 476阅读 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]: /images/20210813/cd2cd6aacf1a46538630ad995f1db801.png