JS控制checkbox
下面的有关实现chckbox全选的方法或多或少存在一些缺陷，具体的方法在另一个帖子中有详细的说明：
http://blog.csdn.net/luweifeng1983/archive/2008/12/18/3549769.aspx
<html>
<body>
<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<br>
<input type=checkbox name=C2 checked>C2<br>
<input type=checkbox name=C3 checked>C3<br>
<input type=checkbox name=C4 checked>C4<br>
<input type=checkbox name=C5 checked>C5<br>
<input type=checkbox name=C6 checked>C6<br>
<input type=checkbox name=C7 checked>C7<br>
<input type=checkbox name=C8 checked>C8<br>
<input type=checkbox name=C9 unchecked>C9<br>
<br>
<input type=button value="全部选中" onClick="checkAll()"><br>
<input type=button value="全部不选" onClick="uncheckAll()"><br>
<input type=button value="选择转换" onClick="switchAll()"><br>
</form>
</body>
</html>
例二：
http://blog.csdn.net/powerlei/archive/2008/01/18/2052114.aspx
例三：
顺便看看getElementsByTagName的用法
http://blog.csdn.net/luweifeng1983/archive/2008/12/18/3549769.aspx
<html>
<body>
<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<br>
<input type=checkbox name=C2 checked>C2<br>
<input type=checkbox name=C3 checked>C3<br>
<input type=checkbox name=C4 checked>C4<br>
<input type=checkbox name=C5 checked>C5<br>
<input type=checkbox name=C6 checked>C6<br>
<input type=checkbox name=C7 checked>C7<br>
<input type=checkbox name=C8 checked>C8<br>
<input type=checkbox name=C9 unchecked>C9<br>
<br>
<input type=button value="全部选中" onClick="checkAll()"><br>
<input type=button value="全部不选" onClick="uncheckAll()"><br>
<input type=button value="选择转换" onClick="switchAll()"><br>
</form>
</body>
</html>
例二：
http://blog.csdn.net/powerlei/archive/2008/01/18/2052114.aspx
- 要实现的功能如图所示：
- 全选的checkbox的js代码如下：
- varstatus=true;
- functionallselect(){
- vartags=document.getElementsByTagName("input");
- for(i=0;i<tags.length;i++)
- {
- if(tags[i].type=="checkbox")
- {
- tags[i].checked=status;
- }
- }
- status=!status;
- }
- 当点击显示职位，申请选中职位，放入收藏夹时的js代码如下：
- functionpanduan(){
- vargou=0;
- vartags=document.getElementsByTagName("input");
- for(i=0;i<tags.length;i++)
- {
- if(tags[i].type=="checkbox")
- {
- if(tags[i].id!="Checkbox1"){//这里的Checkbox1为全选checkbox
- if(tags[i].checked==true){
- gou++;
- }
- }
- }
- }
- if(gou==0){
- window.alert("请要在选择的职位前打勾！");
- returnfalse;
- }
- }
例三：
- <HTML>
- <SCRIPTLANGUAGE="JavaScript">
- <!--
- functioncheckall(){
- //varhuang=document.all['huang'];
- varhuang=document.getElementsByTagName("input");
- for(i=0;i<huang.length;i++){
- if(huang[i].type=="checkbox")
- {
- huang[i].checked=true;
- }
- }
- }
- functioncenterall(){
- varhuang=document.all['huang'];
- for(i=0;i<huang.length;i++){
- huang[i].checked=false;
- }
- }
- //-->
- </SCRIPT>
- <BODY>
- <inputtype="checkbox"name="huang"value="ON">
- <inputtype="checkbox"name="huang"value="OFF">
- <br>
- <inputtype="button"value="checkall"onclick="checkall();">
- <inputtype="button"value="centerall"onclick="centerall();">
- </BODY>
- </HTML>
- Javascript为我们提供了两种获取document引用的方式:getElementById和getElementsByTagName.前者返回一个指向具有指定Id属性的元素引用,而后者则返回具有该标签的元素数组,前者应用较多,也是比较熟悉的,本文针对后者做简要解释。
- 比方说:定义一个table,其中有多个td标签,现在需要更改第二个单元格的背景颜色,则可用getElementsByTagName.具体代码如下:
- ......
- <tablestyle="width:100%;">
- <tr><td>1</td>
- <td>2</td>
- <td>3</td>
- </tr>
- <tr>
- <td>4</td>
- <td>5</td>
- <td>6</td>
- </tr>
- <tr>
- <td>7</td>
- <td>8</td>
- <td>9</td>
- </tr>
- </table>
- ......
- vartdObject=document.getElementsByTagName("td").item(1);
- tdObject.style.backgroundColor="blue";
- ......