<table >
<caption>复选框的三种状态</caption>
<tr><td bgcolor="red"><input type="checkbox" name="a" onclick="check()"></td></tr>
<tr><td><input type="checkbox" name="c" onclick="check_ss('a','c')"></td></tr>
<tr><td><input type="checkbox" name="c" onclick="check_ss('a','c')"></td></tr>
<tr><td><input type="checkbox" name="c" onclick="check_ss('a','c')"></td></tr>
<tr><td><input type="checkbox" name="c" onclick="check_ss('a','c')"></td></tr>
</table>
<script>
//复选框状态变化
function check_ss(aa,cc)
{
var a = document.getElementsByName(aa);
var c = document.getElementsByName(cc);
var tmp1 = true, tmp2 = false
for(var i=0;i<c.length;i++)
tmp1 &= c[i].checked, tmp2 |= c[i].checked;
a[0].checked = tmp1;
a[0].indeterminate = !tmp1 && tmp2;
}
方法一
function check()
{
var a = document.getElementsByName("a");
var cc = document.getElementsByName("c");
for(var i=0;i<cc.length;i++)
cc[i].checked=a[0].checked;
}
方法二(笨笨的)
//全选
function check_all(box){
t_box = document.all[box];
var length = t_box.length;
for(var i=0;i<length;i++){
t_box[i].checked=true;
}
}
//反选
function check_anti(box){
t_box = document.all[box];
var length = t_box.length;
for(i=0;i<length;i++){
if(true==t_box[i].checked){
t_box[i].checked=false;
}
else
t_box[i].checked=true;
}
}
//方法三
function mp_checkForm(allcheck,checked)
{
flag = false;
var all_check = document.all[allcheck];
var checkButton = document.all[checked];
if(checkButton == null || checkButton==undefined || checkButton.length == 0)
{
return false;
}
if(all_check.checked)
{
if(typeof(checkButton.checked)=="boolean")
{
checkButton.checked=true;
}
else
{
for(var i=0;i<checkButton.length;i++)
{
checkButton[i].checked=true;
}
}
}
else
{
if(typeof(checkButton.checked)=="boolean")
{
checkButton.checked=false;
}
else
{
for(var i=0;i<checkButton.length;i++)
{
checkButton[i].checked=false;
}
}
}
}
</script>
(第三种状态仅适用于IE内核的浏览器,opera未测试)
getElementsByName该属性只适用于表单内标签。
在相同name的复选框不止一个时也可使用document.all["checkname"],但是只有一个复选框时用all会报错。第二、三种方法有bug