checkbox状态变化

本文介绍了几种实现复选框状态管理的方法,包括全选、反选及第三种状态的实现方式,并提供了具体的JavaScript代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 <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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值