`

JS控制checkbox

JavaScriptJ#CC++C# 
阅读更多
下面的有关实现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
  1. 要实现的功能如图所示：
  5. 全选的checkbox的js代码如下：
  7. varstatus=true;
  8. functionallselect(){
  11. vartags=document.getElementsByTagName("input");
  12. for(i=0;i<tags.length;i++)
  13. {
  14. if(tags[i].type=="checkbox")
  15. {
  16. tags[i].checked=status;
  17. }
  18. }
  19. status=!status;
  21. }
  23. 当点击显示职位，申请选中职位，放入收藏夹时的js代码如下：
  25. functionpanduan(){
  26. vargou=0;
  27. vartags=document.getElementsByTagName("input");
  28. for(i=0;i<tags.length;i++)
  29. {
  30. if(tags[i].type=="checkbox")
  31. {
  32. if(tags[i].id!="Checkbox1"){//这里的Checkbox1为全选checkbox
  33. if(tags[i].checked==true){
  34. gou++;
  35. }
  36. }
  37. }
  38. }
  39. if(gou==0){
  40. window.alert("请要在选择的职位前打勾！");
  41. returnfalse;
  42. }
  44. }

例三：
  1. <HTML>
  2. <SCRIPTLANGUAGE="JavaScript">
  3. <!--
  4. functioncheckall(){
  5. //varhuang=document.all['huang'];
  6. varhuang=document.getElementsByTagName("input");
  8. for(i=0;i<huang.length;i++){
  9. if(huang[i].type=="checkbox")
  10. {
  11. huang[i].checked=true;
  12. }
  13. }
  14. }
  16. functioncenterall(){
  17. varhuang=document.all['huang'];
  18. for(i=0;i<huang.length;i++){
  19. huang[i].checked=false;
  20. }
  21. }
  22. //-->
  23. </SCRIPT>
  24. <BODY>
  25. <inputtype="checkbox"name="huang"value="ON">
  26. <inputtype="checkbox"name="huang"value="OFF">
  27. <br>
  28. <inputtype="button"value="checkall"onclick="checkall();">
  29. <inputtype="button"value="centerall"onclick="centerall();">
  30. </BODY>
  31. </HTML>
顺便看看getElementsByTagName的用法
  1. Javascript为我们提供了两种获取document引用的方式:getElementById和getElementsByTagName.前者返回一个指向具有指定Id属性的元素引用,而后者则返回具有该标签的元素数组,前者应用较多,也是比较熟悉的,本文针对后者做简要解释。
  2. 比方说:定义一个table,其中有多个td标签,现在需要更改第二个单元格的背景颜色,则可用getElementsByTagName.具体代码如下:
  3. ......
  4. <tablestyle="width:100%;">
  5. <tr><td>1</td>
  6. <td>2</td>
  7. <td>3</td>
  8. </tr>
  9. <tr>
  10. <td>4</td>
  11. <td>5</td>
  12. <td>6</td>
  13. </tr>
  14. <tr>
  15. <td>7</td>
  16. <td>8</td>
  17. <td>9</td>
  18. </tr>
  19. </table>
  20. ......
  21. vartdObject=document.getElementsByTagName("td").item(1);
  22. tdObject.style.backgroundColor="blue";
  23. ......


分享到：
| JSP与JS交互问题，值传递
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics