简单复选框的实现方法

来源：互联网发布：淘宝理财产品可靠吗编辑：程序博客网时间：2024/05/22 13:17
<script type="text/javascript"><!--//说明：Javascript控制CheckBox的全选与取消全选function checkAll(name){    var el = document.getElementsByTagName('input'); //取document中所有的input，比如文本输入框、按钮等元件，全都取出来存入数组，可以用el.length取数量，el[i]取内容    var len = el.length;    for(var i=0; i<len; i++)    {        if((el[i].type=="checkbox") && (el[i].name==name))        {              el[i].checked = true;        }    }}function clearAll(name){    var el = document.getElementsByTagName('input');    var len = el.length;    for(var i=0; i<len; i++)    {        if((el[i].type=="checkbox") && (el[i].name==name))        {              el[i].checked = false;        }    }}//--></script></head><body><!--把下面代码加到<body>与</body>之间--><form><input type="checkbox" name="test" value="" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }">字母全选开关<input type="checkbox" name="test" value="a">a<input type="checkbox" name="test" value="b">b<input type="checkbox" name="test" value="c">c<input type="checkbox" name="test" value="d">d<input type="checkbox" name="test" value="e">e<input type="checkbox" name="test" value="f">f<input type="checkbox" name="test" value="g">g<br><input type="checkbox" name="num" value="" onclick="if(this.checked==true) { checkAll('num'); } else { clearAll('num'); }">数字全选开关<input type="checkbox" name="num" value="1">1<input type="checkbox" name="num" value="2">2<input type="checkbox" name="num" value="3">3<br><input type="button" value="选择所有的字母" onclick="checkAll('test')"><input type="button" value="清空选中的字母" onclick="clearAll('test')"><br><input type="button" value="选择所有的数字" onclick="checkAll('num')"><input type="button" value="清空选中的数字" onclick="clearAll('num')"></form></body></html>
0 0