<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > |
<html> |
<head> |
<title>全选反选全不选</title> |
<script type= "text/javascript" > |
/* |
全选:当单击全选按钮的时候,触发事件。 |
|
*/ |
//全选触发的事件 |
function checkAll(node){ |
//获取所有name为hobby的input标签 |
var inputs = document.getElementsByName( "hobby" ); |
//遍历所有的input标签 |
for ( var i=0;i<inputs.length;i++){ |
//inputs[i].checked = true; |
//全选按钮的状态和其他复选框的状态一致 |
inputs[i].checked = node.checked; |
} |
} |
//反选事件 |
function check(){ |
//获取所有name为hobby的input标签 |
var inputs = document.getElementsByName( "hobby" ); |
/* |
当前的复选框没有选中,就把它选中,如果已经选中状态,就改成未选中状态 |
*/ |
for ( var i=0;i<inputs.length;i++){ |
/*使用判断来获取当权的复选框是否被选中 |
if( inputs[i].checked ){ |
inputs[i].checked = false; |
}else{ |
inputs[i].checked = true; |
}*/ |
inputs[i].checked = inputs[i].checked? false : true ; |
} |
} |
</script> |
</head> |
<body> |
<input type= "checkbox" name= "hobby" />C<br/> |
<input type= "checkbox" name= "hobby" />Java<br/> |
<input type= "checkbox" name= "hobby" />PHP<br/> |
<input type= "checkbox" name= "hobby" />C #<br/> |
<input type= "checkbox" name= "hobby" />C++ <br/> |
|
<input type= "checkbox" onclick= "checkAll(this)" />全选/全不选 <br/> |
<input type= "checkbox" onclick= "check()" />反选 |
|
</body> |
</html> |