チェックボックスの全選択反転実装(ショッピングカートのチェックボックス実装)

1870 ワード

今週の仕事では、全選をするときに殻にぶつかって、暇な時間に全選のいくつかの実現方法を整理します.htmlページ


	
		
		 
		
		
	
	
		 

jsコード
	// 
	$("#allCheck").click(function(){
		if($(this).attr("checked")){
			$("input[name='check']").attr("checked",true);
		}else{
			$("input[name='check']").attr("checked",false);
		}
	})
	// 
	$("input[name='check']").change(function(){
		if($("input[name='check']").not("input:checked").size() <= 0){
			$("#allCheck").attr("checked",true);
		}else{
			$("#allCheck").attr("checked",false);
		}
	})

2の
	// 
	$("#allCheck").click(function(){
		$("input[name='check']").prop("checked",this.checked);
	})
	// 
	$("input[name='check']").change(function(){
		if($("input[name='check']").not("input:checked").size() <= 0){
			$("#allCheck").prop("checked",true);
		}else{
			$("#allCheck").prop("checked",false);
		}
	})

3の ( js)
	// 
	$("#allCheck").click(function(){
		var a = document.getElementById("allCheck");
		var b = document.getElementsByName("check");
		if(a.checked){
			for(var i = 0; i < b.length; i++){
				b[i].checked = true;
			}
		}else{
			for(var i = 0; i < b.length; i++){
				b[i].checked = false;
			}
		}
	})
	// 
	$("input[name='check']").click(function(){
		var flag = true;
		var a = document.getElementById("allCheck");
		var b = document.getElementsByName("check");
		for(var i = 0; i < b.length; i++){
			if(!b[i].checked){
				flag = false;
				break;
			}
		}
		a.checked = flag;
	});