JQuery复选框练习

$(function(){
	//绑定页面全选事件
	$("input[name='select-all']").change(function(){
		//取得复选框的状态
		var checked=$(this).prop("checked");
		$("input[name*='[]']").prop("checked",checked);
		changeItemColor();
	})
	//为店铺绑定事件
	$("input[name='orders[]']").change(function(){
		//取得店铺复选框的状态
		var checked=$(this).prop("checked");
		//让当前店铺下的所有购物项的选择状态等于 店铺的状态
		$(this).parents("div[id^='shop_']").find("input[name='items[]']").prop("checked",checked);
		changeItemColor();
	})
	//绑定单选事件
	$("input[name='items[]']").change(function(){
		//判断当前店购物项所在店铺下的所有商品是否全部选择了
		//如果没有选择的商品为0 那么店铺就应该处于选中状态
		var checked=$(this).parents("div[id^='shop_']").find("input[name='items[]']:not(:checked)").length==0;
		console.log(checked);
		//更新店铺的选择状态
		$(this).parents("div[id^='shop_']").find("input[name='orders[]']").prop("checked",checked);
		
		changeItemColor();
	})
	$("input[name='orders[]']").change(function(){
		//判断所有店铺是否为选中状态
	    var checked=$("input[name='orders[]']:not(:checked)").length==0;
		//更新页面选项
		$("input[name='select-all']").first().prop("checked",checked);
	})
})
//改变颜色的函数
function changeItemColor(){
	$("input[name='items[]']").each(function(){
		//取得遍历对象
		//$(this)表示每次遍历到的对象
		var checked=$(this).prop("checked");
		if (checked) {
			$(this).parents("div[class='item']").addClass('item item-selected');
		} else{
			$(this).parents("div[class='item item-selected']").removeClass('item-selected');			
		}
	})
}