复选框全选

1.前端需要使用到全选操作

<input type="checkbox" id="all">

<input class="checkbox" type="checkbox" name="checkedItem" value="[id]">

2.两种方法实现

Checkbox 对象的属性

属性	描述
accessKey	设置或返回访问 checkbox 的快捷键。
alt	设置或返回不支持 checkbox 时显示的替代文本。
checked	设置或返回 checkbox 是否应被选中。
defaultChecked	返回 checked 属性的默认值。
disabled	设置或返回 checkbox 是否应被禁用。
form	返回对包含 checkbox 的表单的引用。
id	设置或返回 checkbox 的 id。
name	设置或返回 checkbox 的名称。
tabIndex	设置或返回 checkbox 的 tab 键控制次序。
type	返回 checkbox 的表单元素类型。
value	设置或返回 checkbox 的 value 属性的值

2.1.方法一

<script type="text/javascript">
	$("#all").click(function(){   
	    if(this.checked){   
	    	$('.checkbox').prop("checked",true);
	    }else{   
	    	$('.checkbox').prop("checked", false);
	    }   
	});
	</script>

2.2.方法二

<script type="text/javascript">
		$(function() {
			$("#all").change(function() {//判断全选框的改变
				var flage = $(this).is(":checked");//全选选中为true，否则为false
				$("input[type=checkbox]").each(function() {
					$(this).prop("checked", flage);
				})
			})
		})
	</script>

3.总结

方法一是直接判断总复选框是否选中来改变子复选框的属性，总复选框选中则子复选框选中

方法二是根据总复选框是否被选中来判断true和false，再把true和false赋给子复选框，改变他的属性

两种本质一样