全选，不选和反选功能

复选框的全选，反选和不选主要应用JavaScript脚本，通过自定义函数完成。

（1）在通过JavaScript脚本中的自定义函数完成复选框的全选，反选和不选功能中，应用的第一个方法是getElementsByTagName，

获取制定标签的名称，返回值为一个包含标签信息的object。

（2）根据getElementsByTagName标签返回的对象，判断标签类型（type）的值是否是checkbox。

（3）当标签类型type的值为checkbox时，为标签中的checkbox赋值。当checked的值为TRUE时，将其赋值为FALSE;当checked的值为FALSE时，

将其赋值为TRUE.

<html>
<meta charset="utf-8"/>
<head>
</head>
<body>
<form method="post" name="form1" id="form1" action="">
    <tr>
        <td width="62" align="center"><input type="checkbox" name="conn_id_1" id="conn_id_1" value="1"/></td>
        <td>东邪</td>
        <td>PHP</td>
        <td>部门经理</td>
        <td>29</td>
    </tr>
    <br/><br/>
    <tr>
        <td width="62" align="center"><input type="checkbox" name="conn_id_2" id="conn_id_2" value="1"/></td>
        <td>西毒</td>
        <td>JAVA</td>
        <td>部门经理</td>
        <td>29</td>
    </tr>
    <br/><br/>
    <tr>
        <td width="62" align="center"><input type="checkbox" name="conn_id_3" id="conn_id_3" value="1"/></td>
        <td>南帝</td>
        <td>VB</td>
        <td>部门经理</td>
        <td>29</td>
    </tr>
    <br/><br/>
    <tr>
        <td width="62" align="center"><input type="checkbox" name="conn_id_4" id="conn_id_4" value="1"/></td>
        <td>北丐</td>
        <td>ASP</td>
        <td>部门经理</td>
        <td>29</td>
    </tr>
    <br/><br/>
    <tr>
            <input type="button" onclick="uncheckAll(form1,status)" value="不选">
            <input type="button" onclick="checkAll(form1,status)"   value="全选">
            <input type="button" onclick="switchAll(form1,status)"  value="反选">
    </tr>
</form>
<script>
    function uncheckAll(form1,status){                        //不选
        var elements = document.getElementsByTagName('input');   //获取input标签
        for(var i=0;i<elements.length;i++){                   //根据标签的长度执行循环
            if(elements[i].type == 'checkbox'){               //判断对象中元素的类型
                if(elements[i].checked==true){               //判断当checked的值为TURE时
                    elements[i].checked=false;              //将checked赋值为FALSE
                }
            }
        }
    }
    function checkAll(form1,status){                           //全选
        var elements = document.getElementsByTagName('input');
        for(var i=0;i<elements.length;i++){
            if(elements[i].type == 'checkbox'){
                if(elements[i].checked==false){
                    elements[i].checked=true;
                }
            }
        }
    }
    function switchAll(form1,status){                          //反选
        var elements = document.getElementsByTagName('input');
        for(var i=0;i<elements.length;i++){
            if(elements[i].type == 'checkbox'){
                if(elements[i].checked==true){
                    elements[i].checked=false;
                }else if(elements[i].checked==false){
                    elements[i].checked=true;
                }
            }
        }
    }
</script>
</body>
</html>

nächsten Abschnitt

neue Datei

<html>
<meta charset="utf-8"/>
<head>
</head>
<body>
<form method="post" name="form1" id="form1" action="">
 <tr>
 <td width="62" align="center"><input type="checkbox" name="conn_id_1" id="conn_id_1" value="1"/></td>
 <td>东邪</td>
 <td>PHP</td>
 <td>部门经理</td>
 <td>29</td>
 </tr>
 <br/><br/>
 <tr>
 <td width="62" align="center"><input type="checkbox" name="conn_id_2" id="conn_id_2" value="1"/></td>
 <td>西毒</td>
 <td>JAVA</td>
 <td>部门经理</td>
 <td>29</td>
 </tr>
 <br/><br/>
 <tr>
 <td width="62" align="center"><input type="checkbox" name="conn_id_3" id="conn_id_3" value="1"/></td>
 <td>南帝</td>
 <td>VB</td>
 <td>部门经理</td>
 <td>29</td>
 </tr>
 <br/><br/>
 <tr>
 <td width="62" align="center"><input type="checkbox" name="conn_id_4" id="conn_id_4" value="1"/></td>
 <td>北丐</td>
 <td>ASP</td>
 <td>部门经理</td>
 <td>29</td>
 </tr>
 <br/><br/>
 <tr>
 <input type="button" onclick="uncheckAll(form1,status)" value="不选">
 <input type="button" onclick="checkAll(form1,status)" value="全选">
 <input type="button" onclick="switchAll(form1,status)" value="反选">
 </tr>
</form>
<script>
 function uncheckAll(form1,status){ //不选
 var elements = document.getElementsByTagName('input'); //获取input标签
 for(var i=0;i<elements.length;i++){ //根据标签的长度执行循环
 if(elements[i].type == 'checkbox'){ //判断对象中元素的类型
 if(elements[i].checked==true){ //判断当checked的值为TURE时
 elements[i].checked=false; //将checked赋值为FALSE
 }
 }
 }
 }

 function checkAll(form1,status){ //全选
 var elements = document.getElementsByTagName('input');
 for(var i=0;i<elements.length;i++){
 if(elements[i].type == 'checkbox'){
 if(elements[i].checked==false){
 elements[i].checked=true;
 }
 }
 }
 }

 function switchAll(form1,status){ //反选
 var elements = document.getElementsByTagName('input');
 for(var i=0;i<elements.length;i++){
 if(elements[i].type == 'checkbox'){
 if(elements[i].checked==true){
 elements[i].checked=false;
 }else if(elements[i].checked==false){
 elements[i].checked=true;
 }
 }
 }
 }
</script>
</body>
</html>

einreichen Code zurücksetzen

Automatische Operation

Ganzer Bildschirm