js中如何实现多个复选框全选

JavaScript016

js中如何实现多个复选框全选,第1张

CheckBox复选框JS实现全选全不选功能,很简单,就只需插入一小段js函数就行了。。。

<script language="javascript">

  function cli(Obj)

  {

  //获取控制其它复选框的对象obj

  var collid = document.getElementByIdx_x("all")

  //获取需要全选,全不选功能的所有复选框

  var coll = document.getElementsByName(Obj)

  //如果obj被选中,则全选

  if (collid.checked){

     //循环设置所有复选框为选中状态

     for(var i = 0 i < coll.length i++)

       coll[i].checked = true

  }else{//取消obj选中状态,则全不选

     //循环设置所有复选框为未选中状态

     for(var i = 0 i < coll.length i++)

       coll[i].checked = false

  }

  }

  </script>

----------------------------------------------------

下面是一组CheckBox复选框html代码

----------------------------------------------------

<input name='多选项名称' type='checkbox' value='' id="all"  onclick="cli('多选项名称')">  全选

<input name='多选项名称' type='checkbox' value='' >  A

<input name='多选项名称' type='checkbox' value='' >  B

<input name='多选项名称' type='checkbox' value='' >  C

<input name='多选项名称' type='checkbox' value='' >  D

<input name='多选项名称' type='checkbox' value='' >  E

<input name='多选项名称' type='checkbox' value='' >  F

----------------------------------------------------

思路:获取复选框对象→循环设置ckecked属性值(true表示选中,false表示未选中)。关键代码:

obj.checked = true | false

实例演示如下:

1、HTML结构

<input type="checkbox" name="test" value="1">item-1

<input type="checkbox" name="test" value="2">item-2

<input type="checkbox" name="test" value="3">item-3<br>

<input type="checkbox" name="test" value="4">item-4

<input type="checkbox" name="test" value="5">item-5<br>

<input type="button" value="全选" onclick="setChecked(true)"><input type="button" value="取消" onclick="setChecked(false)">

2、javascript代码

function setChecked(option){

var cks = document.getElementsByName("test")

for(i=0i<cks.lengthi++){

cks[i].checked = option

}

}

3、效果演示

<title>无标题文档</title>

<script type="text/javascript" language="javascript">

function selall()

{

var start = 1

var end = 4

for(var i=starti<=endi++)

{

eval("document.all.a"+i+".checked=true")

}

}

</script>

</head>

<body>

<input type="checkbox" name="a1" value="a1">

<input type="checkbox" name="a2" value="a2">

<input type="checkbox" name="a3" value="a3">

<input type="checkbox" name="a4" value="a4">

<input type="button" onclick="selall()" value="全选">

</body>