关闭

checkbox框的各种状态选择

137人阅读 评论(0) 收藏 举报
分类:

首先是画面上的效果


      




js中的实现逻辑

/**
 * 选择框点击事件
 */
function checkBoxClick(){
	var _this = $(this); //获取当前对象的jquery对象
	var _parent = _this.parent().parent(); //获取当前对象父父的jquery对象
	if(!_parent.hasClass("operate")){ //如果不是全选box的话
		var _len1 = $(".detail input[type='checkbox']").length; //①取得detail下的checkbox个数①
		var _len2 = $(".detail input:checked").length;	//②取得当前选中的checkbox个数
		if(_len1 == _len2){	//①=②
			$(".operate input[type='checkbox']").prop("checked",true);  //operate中的全选box设置为选中状态
		} else {
			$(".operate input[type='checkbox']").prop("checked",false);	//operate中的全选box设置为非选中状态
		}
	} else {	//如果是全选box的话
		if(_this.is(":checked")){//同时是选中状态的话
			$(".detail input[type='checkbox']").prop("checked",true);//把所有的detail下的checkbox选中
		} else {
			$(".detail input[type='checkbox']").prop("checked",false);//把所有的detail下的checkbox不选中
		}
	}
}


1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:15887次
    • 积分:396
    • 等级:
    • 排名:千里之外
    • 原创:23篇
    • 转载:6篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档