전체 선택, 선택 해제, 선택 반전 기능

모든 체크박스 선택, 선택 해제 및 선택 해제는 주로 JavaScript 스크립트를 사용하며 사용자 정의 기능을 통해 완료됩니다.

(1) JavaScript 스크립트의 사용자 정의 기능을 통해 확인란의 선택, 반전 및 선택 취소 기능을 완료할 때 적용되는 첫 번째 메소드는 getElementsByTagName이며,

는 지정된 태그의 이름을 가져오고 반환 값은 1을 포함하는 객체입니다. 라벨 정보.

(2) getElementsByTagName 태그에서 반환된 객체를 기반으로 태그 유형(type)의 값이 체크박스인지 확인합니다.

(3) 라벨 유형 유형의 값이 체크박스인 경우 라벨의 체크박스에 값을 할당합니다. 확인된 값이 TRUE이면 FALSE로 지정하고, 확인된 값이 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>

지속적인 학습

새로운 파일

<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>

제출하다 코드 재설정

자동운전