자바스크립트에서 모두 선택하는 방법-JS 튜토리얼-php.cn

자바스크립트에서 모두 선택하는 방법

藏色散人

풀어 주다： 2022-01-18 11:26:17

원래의

6547명이 탐색했습니다.

JavaScript에서 전체 선택을 구현하는 방법: 1. HTML 및 CSS를 통해 양식을 만듭니다. 2. DOM 메서드를 사용하여 각각 전체 선택 및 단일 선택에 대한 "입력" 요소를 얻습니다. 3. 변수 isAllChecked를 설정합니다. 4. 모두 선택 버튼에 할당된 isAllChecked 값을 변경합니다.

자바스크립트에서 모두 선택하는 방법

이 기사의 운영 환경: Windows 7 시스템, javascript 버전 1.8.5, Dell G3 컴퓨터.

자바스크립트에서 모두 선택하는 방법은 무엇인가요?

JS를 이용하여 전체선택과 역선택을 폼에서 구현

이것도 일반 전자상거래 장바구니에 있는 것을 모두 선택하고 역선택을 추가하는 연습입니다. 역선택 기능이 있는 장바구니는 많지 않지만 윈도우 리소스입니다. 관리자는 역선택 기능을 가지고 있습니다)

자바스크립트에서 모두 선택하는 방법

먼저 모두 선택하는 것에 대해 이야기합시다:

4줄의 제품이 모두 체크되면 " 전체선택'이 자동으로 체크되며, 체크되지 않은 상품이 있을 경우 '전체선택'이 자동으로 취소됩니다.

4개 행의 제품이 모두 선택되지 않은 경우 "모두 선택"을 선택하면 4개 행의 제품이 모두 선택됩니다.

"모두 선택"이 선택된 경우 "모두 선택"을 선택 취소하면 모든 제품이 선택됩니다. 선택 해제하세요.

요구 사항을 정리한 후 먼저 HTML과 CSS를 사용하여 이 양식을 그립니다. 코드는 다음과 같습니다.

<html>
<head>
    <meta charset="utf-8">
    <title>全选2</title>
    <style type="text/css">     
        .wrap{
            margin-left: 500px;
            margin-top: 200px;
        }
        table{
            border-collapse:collapse;
        }

        th{
            border:1px solid black;
            height: 45px;   
        }

        td{
            border:1px solid black;
            text-align: center;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="wrap">  
        <table cellspacing="0" cellpadding="14">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="selectAll" onclick="funcAll()">
                    </th>
                    <th>商品</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" class="selectOne" onclick="funcOne()">
                    </td>
                    <td>iPhone X</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="selectOne" onclick="funcOne()">
                    </td>
                    <td>iPad pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="selectOne" onclick="funcOne()">
                    </td>
                    <td>iPad air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="selectOne" onclick="funcOne()">
                    </td>
                    <td>Apple watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
        <input type="button" id="backwardOption" value="反选" onclick="funcBackward()">
    </div>
</body>
</html>

로그인 후 복사

여기서는 모두 선택하고 "funcAll"이라는 함수 이름을 지정했습니다. ()". 선택된 것을 "funcOne()"이라고 하고, 그 반대의 것을 "funcBackward()"라고 합니다. CSS 부분은 주로 폼에 테두리를 추가하는 부분과 동시에 교차점의 테두리를 블렌딩하는 부분인데, 기본적으로 가장 단순한 모습입니다.

먼저 두 번째와 세 번째 요구사항에 대해 이야기해 보겠습니다. 논리는 비교적 간단합니다.

전체 선택과 단일 선택에 대해 각각 "입력" 요소를 가져오려면 getElementById를 사용하세요. () (이미 ID를 미리 설정), 4개의 라디오 선택이 있습니다. getElementByClassName()을 사용하여 가져옵니다(클래스는 미리 설정되어 있습니다).

얻은 요소를 변수에 할당한 다음 for 루프를 사용하여 배열을 순회하고, 모두를 선택하는 변수의 확인 속성을 각 단일 선택된 변수의 확인 속성에 할당합니다.

이 시점에서 2번과 3번이 동시에 해결되었습니다. 코드는 다음과 같습니다.

function funcAll(){
            var selectAll = document.getElementById(&#39;selectAll&#39;);
            var selectOnes = document.getElementsByClassName(&#39;selectOne&#39;);
            for (var i = 0; i < selectOnes.length; i++) {                 //循环遍历，把全选框的值赋给每个单选框
                selectOnes[i].checked = selectAll.checked;             
            }
        }

로그인 후 복사

다음으로 1번 항목에 대해 말씀드리겠습니다. "4개 행의 제품을 모두 체크하면 자동으로 "전체 선택"이 됩니다. 체크되어 있지 않은 상품이 있을 경우 '모두 선택'이 자동으로 취소됩니다. "

여기서 '모두 선택' 상태는 다른 모든 버튼을 모니터링하는 것과 유사합니다. 변경사항이 있으면 그에 따라 변경됩니다. . 따라서 이 로직은 각 제품 행의 라디오 버튼에 대한 마우스 클릭 이벤트에 작성되어야 합니다.

isAllChecked 변수를 브리지로 설정했습니다. 초기 상태에서는 isAllChecked를 true로 정의하고 각 라디오 버튼을 반복합니다. 라디오 버튼이 선택되지 않은 것이 감지되면 isAllChecked를 false로 설정하고 루프에서 빠져나옵니다. isAllChecked 값을 모두 선택 버튼에 할당합니다.

이렇게 하면 하나의 라디오 버튼이 선택되지 않으면 선택한 모든 라디오 버튼도 선택 취소됩니다. , 코드는 다음과 같습니다:

function funcOne(){                                                  
            var selectAll = document.getElementById(&#39;selectAll&#39;);            //函数作用域，所以得再定义一遍
            var selectOnes = document.getElementsByClassName(&#39;selectOne&#39;);
            var isAllChecked = true;                                        //定义一个变量作为桥梁来控制全选按钮
            for (var i = 0; i < selectOnes.length; i++) {
                if (selectOnes[i].checked === false) {
                    isAllChecked = false;
                    break;
                }
            }
            selectAll.checked = isAllChecked;
        }

로그인 후 복사

역 선택에 대해 이야기합시다

역 선택 버튼을 클릭하면 모든 라디오 버튼의 상태가 반전됩니다. 선택한 항목은 선택 취소되고 선택되지 않은 항목은 선택됩니다
반전 선택을 클릭하면 결과는 이전 논리와 일치하도록 선택을 만드는 것이 여전히 가능합니다.

항목 1은 실제로 구현하기 쉽습니다. 반전 버튼을 클릭하면 4개의 라디오 버튼을 순환하면서 각 요소에 해당하는 체크 속성을 반전시킵니다.

그러나 앞서 구현한 모든 단일 항목에 대한 전체 선택 모니터링은 실제로 각 라디오 버튼의 클릭 이벤트에서 구현됩니다. 즉, 라디오 버튼을 클릭하여 라디오 버튼의 상태를 변경하지 않으면, 실제로 모두 선택하면 전체 상황을 모니터링할 수 없습니다.

그래서 역선택 마우스 클릭 기능에 모니터링 코드를 작성할 수 있습니다. 최종 코드는 다음과 같습니다.

            var selectAll = document.getElementById(&#39;selectAll&#39;);            //函数作用域，所以得再定义一遍
            var selectOnes = document.getElementsByClassName(&#39;selectOne&#39;);
            for (var i = 0; i < selectOnes.length; i++) {
                selectOnes[i].isAllChecked = !selectOnes[i].checked;
            }
            function funcOne(){};
            var isAllChecked = true;                                        //定义一个变量作为桥梁来控制全选按钮
            for (var i = 0; i < selectOnes.length; i++) {
                if (selectOnes[i].checked === false) {
                    isAllChecked = false;
                    break;
                }
            }
            selectAll.checked = isAllChecked;
        }

로그인 후 복사

최종 효과는 다음과 같습니다.

자바스크립트에서 모두 선택하는 방법