复选框选中事件

jquery 专栏收录该内容
19 篇文章 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);
      }

});

三.例子


<!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>






  • 0
    点赞
  • 0
    评论
  • 5
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

面条请不要欺负汉堡

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值