复选框选中事件

最新推荐文章于 2025-05-28 11:39:43 发布

面条请不要欺负汉堡

最新推荐文章于 2025-05-28 11:39:43 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签：复选框选中事件复选框处理事件

本文链接：https://blog.youkuaiyun.com/gao_xu_520/article/details/75095929

jquery 专栏收录该内容

19 篇文章

订阅专栏

一.方法

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>