<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript">
<!--
function checkAll( booleanValue){
var checkboxes= document.getElementsByName("hobby")
for(var i=0;i< checkboxes.length;i++){
checkboxes[i].checked = booleanValue;
}
}
function reverseCheck(){
var checkboxes= document.getElementsByName("hobby")
for(var i=0;i< checkboxes.length;i++){
checkboxes[i].checked = !checkboxes[i].checked;
}
}
//-->
</script>
</head>
<body>
<h1>请选择你的爱好:</h1>
全选/全不选<input type="checkbox" name="hobbys" onclick="checkAll(this.checked)" /><br/>
<input type="checkbox" name="hobby" value="football" />足球
<input type="checkbox" name="hobby" value="basketball" />篮球
<input type="checkbox" name="hobby" value="swim" />游泳
<input type="checkbox" name="hobby" value="singing" />唱歌<br/>
<input type="button" value="全选" onclick="checkAll(true)"/>
<input type="button" value="全不选" onclick="checkAll(false)"/>
<input type="button" value="反选" onclick="reverseCheck()"/>
</body>
</html>
这行代码是设置这个input 的onclick事件,调用的方法是checkAll,参数是当前input对象的checked属性值。
this就是这个input元素,因为是checkbox类型,所以它有一个checked属性,如果选中就是true,没选中就是false.
如果当前的被选中就选中全部,就是全选功能