JS checkbox控制操作代码_表单特效

<script language="JavaScript"> <!-- Begin function checkAll() { for (var j = 1; j <= 9; j++) { box = eval("document.checkboxform.C" + j); if (box.checked == false) box.checked = true; } } function uncheckAll() { for (var j = 1; j <= 9; j++) { box = eval("document.checkboxform.C" + j); if (box.checked == true) box.checked = false; } } function switchAll() { for (var j = 1; j <= 9; j++) { box = eval("document.checkboxform.C" + j); box.checked = !box.checked; } } // End --> </script> <form name="checkboxform"> <input type="checkbox" name="C1" checked>C1 <input type="checkbox" name="C2" checked>C2 <input type="checkbox" name="C3" checked>C3 <input type="checkbox" name="C4" checked>C4 <input type="checkbox" name="C5" checked>C5 <input type="checkbox" name="C6" checked>C6 <input type="checkbox" name="C7" checked>C7 <input type="checkbox" name="C8" checked>C8 <input type="checkbox" name="C9" unchecked>C9 <input type="button" value="全部选中" onclick="checkAll()"> <input type="button" value="全部不选" onclick="uncheckAll()"> <input type="button" value="选择转换" onclick="switchAll()"> </form>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

 
例二：
要实现的功能如图所示：
全选的checkbox的js代码如下：
var status=true;
function allselect(){
var tags=document.getElementsByTagName("input");
for (i = 0; i {
if (tags[i].type == "checkbox")
{
tags[i].checked=status;
}
}
status=!status;
}
当点击显示职位，申请选中职位，放入收藏夹时的js代码如下：
function panduan(){
var gou=0;
var tags=document.getElementsByTagName("input");
for (i = 0; i {
if (tags[i].type == "checkbox")
{
if(tags[i].id!="Checkbox1"){ //这里的Checkbox1为全选checkbox
if(tags[i].checked==true){
gou++;
}
}
}
}
if(gou==0){
window.alert("请要在选择的职位前打勾！");
return false;
}
}
例三：

<script language="JavaScript"> <!-- function checkall(){ //var huang = document.all['huang']; var huang = document.getElementsByTagName("input"); for(i = 0;i < huang.length;i++){ if(huang[i].type == "checkbox") { huang[i].checked = true; } } } function centerall(){ var huang = document.all['huang']; for(i = 0;i < huang.length;i++){ huang[i].checked = false; } } //--> </script> <input type="checkbox" name="huang" value="ON"> <input type="checkbox" name="huang" value="OFF"> <input type="button" value="checkall" onclick="checkall();"> <input type="button" value="centerall" onclick="centerall();">
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

顺便看看getElementsByTagName的用法
Javascript为我们提供了两种获取document引用的方式:getElementById和getElementsByTagName.前者返回一个指向具有指定Id属性的元素引用,而后者则返回具有该标签的元素数组,前者应用较多,也是比较熟悉的,本文针对后者做简要解释。
比方说:定义一个table,其中有多个td标签,现在需要更改第二个单元格的背景颜色,则可用getElementsByTagName.具体代码如下:
......

1	2	3
4	5	6
7	8	9

......
var tdObject=document.getElementsByTagName("td").item(1);
tdObject.style.backgroundColor="blue";
......