javascript全选或者取消页面CheckBox

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    
<title>无标题页</title>
    
<script type="text/javascript">
        
function CheckAll(obj){
            
var form = document.getElementById("form1");
            
if(obj.checked){
                
for(var i=0;i<form.elements.length;i++){
                    
if(form.elements[i].type == "checkbox"){
                        form.elements[i].checked 
= true;
                    }
                }
            }
            
else{
                
for(var i=0;i<form.elements.length;i++){
                    
if(form.elements[i].type == "checkbox"){
                        form.elements[i].checked 
= false;
                    }
                }
            }
            
        }
    
</script>
</head>
<body>
    
<form id="form1" method="post" action="">
    
<div>
       
  <input id="Checkbox1" type="checkbox"  onclick="CheckAll(this)" />全选<br/>

        
<input id="Checkbox2" type="checkbox" /><br/>
        
<input id="Checkbox3" type="checkbox" /><br/>
       <input id="Checkbox4" type="checkbox" /><
br/>
       <input id="Checkbox5" type="checkbox" /><
br/>
        
<input id="Checkbox6" type="checkbox" /><br/>
    
</div>
    
</form>
</body>
</html>

 

方法二:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript">
        function aa(){
            var v=document.getElementsByName("r");
            for(var i=0;i<v.length ;i++){
                if(v[i].checked){
                alert(v[i].value+","+v[i].nextSibling.nodeValue);
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="checkbox" name="r" value="1">a<br> 

 <input type="checkbox" name="r" value="2">b<br> 

<input type="checkbox" name="r" value="3">c<br> 

 <input type="checkbox" name="r" value="4">d<br> 

 <input type="checkbox" name="r" value="5">e<br> 

<input type="checkbox" name="r" value="6">f<br> 

 <input type="checkbox" name="r" value="7">g<br> 

 <input type="checkbox" name="r" value="8">h<br> 

 <input type="checkbox" name="r" value="9">i<br> 

 <input type="checkbox" name="r" value="10">j<br> 

 <br> 

<input type="button" value="button"> 


    </div>
    </form>
</body>
</html>

 

方法三:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript">
        function AllCheckBox(){
            var v=document.getElementsByTagName("input").length
            alert(v)
            for(var i=0;i<v;i++){
                var t=document.getElementsByTagName("input")[i];
                if(t.type=="checkbox"){
                 if(t.checked){
                        t.checked=false;
                    }else{
                        t.checked=true;
                    }
                  
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
        <asp:Button ID="Button1" runat="server" Text="Button" />
   
    </div>
    <asp:CheckBox ID="CheckBox1" runat="server" />
    <asp:CheckBox ID="CheckBox2" runat="server" />
    <asp:CheckBox ID="CheckBox3" runat="server" />
    <asp:CheckBox ID="CheckBox4" runat="server" />
    <asp:CheckBox ID="CheckBox5" runat="server" />
    <asp:CheckBox ID="CheckBox6" runat="server" />
    <br />
    <br />
    <input id="Button2" type="button" value="122" /></form>
</body>
</html>

你可能感兴趣的:(JavaScript,职场,checkbox全选,休闲)