JS控制checkbox

最新推荐文章于 2024-03-04 15:28:47 发布

luweifeng1983

最新推荐文章于 2024-03-04 15:28:47 发布

阅读量7.4k

点赞数

分类专栏： JavaScript应用篇文章标签： button javascript tags input function c

本文链接：https://blog.csdn.net/luweifeng1983/article/details/3532529

版权

JavaScript应用篇专栏收录该内容

37 篇文章 0 订阅

订阅专栏

下面的有关实现chckbox全选的方法或多或少存在一些缺陷，具体的方法在另一个帖子中有详细的说明：
http://blog.csdn.net/luweifeng1983/archive/2008/12/18/3549769.aspx

<html>
<body>
<SCRIPT LANGUAGE="JavaScript">


</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代码如下：
var status=true;
    function allselect(){
        
         
            var tags=document.getElementsByTagName("input");        
         for (i = 0; i < tags.length; 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 < 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("请要在选择的职位前打勾！");  
                return false;
             }
            
    }
 

例三：

 
 <HTML>
<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>
<BODY>
<input type="checkbox" name="huang" value="ON">
<input type="checkbox" name="huang" value="OFF">
<br>
<input type="button" value = "checkall" onclick = "checkall();">
<input type="button" value = "centerall" onclick = "centerall();">
</BODY>
</HTML> 
 

顺便看看getElementsByTagName的用法

 
 Javascript为我们提供了两种获取document引用的方式:getElementById和getElementsByTagName.前者返回一个指向具有指定Id属性的元素引用,而后者则返回具有该标签的元素数组,前者应用较多,也是比较熟悉的,本文针对后者做简要解释。
比方说:定义一个table,其中有多个td标签,现在需要更改第二个单元格的背景颜色,则可用getElementsByTagName.具体代码如下:
......
    <table style="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>
......
           var tdObject=document.getElementsByTagName("td").item(1);
           tdObject.style.backgroundColor="blue";
......
 

luweifeng1983

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS控制checkbox

下面的有关实现chckbox全选的方法或多或少存在一些缺陷，具体的方法在另一个帖子中有详细的说明：http://blog.csdn.net/luweifeng1983/archive/2008/12/18/3549769.aspx function checkAll() {for (var j = 1; j box = eval("document.checkboxform.C" + j); i
复制链接

扫一扫