jQuery를 사용하여 독립형 컨테이너에서 'ALL/NO SELECT ALL SELECT'CheckBox 기능 관리

이 기사는 jQuery를 사용하여 "ALL/NO SELECT ALL SELECT"기능을 구현하여 여러 확인란 세트의 기능을 구현하여 각 체크 박스 세트가 서로 영향을 미치지 않고 독립적 인 HTML 컨테이너에서 작동하는지 확인합니다. jQuery의 이벤트 청취, DOM Traversal 및 Property Operations와 결합 된 부모 컨테이너에 특정 클래스 이름을 추가하면 "All Select"및 리버스 링크를 클릭 할 때 동일한 그룹의 모든 확인란의 선택된 상태를 제어 할 수 있습니다. 동일한 그룹의 모든 체크 박스가 자동으로 선택되거나 확인이 없을 때 "모두 확인이 없어 질 때"가 자동으로 취소 될 때 "가 자동으로 취소됩니다."

핵심 요구 사항 및 HTML 구조 설계

웹 개발에서 우리는 종종 확인란 세트에 "모든 선택"기능을 제공하여 사용자가 모든 관련 옵션을 신속하게 선택하거나 선택 취소 할 수 있어야합니다. 예를 들어, 다른 카테고리 또는 영역에 페이지에 여러 개의 독립적 인 확인란 세트가있는 경우 각 그룹은 자체 "모든 선택"기능이 있어야하며 서로 영향을 줄 수 없습니다.

이를 달성하기 위해 핵심은 합리적인 HTML 구조를 설계하고 JQuery의 선택기 및 DOM 트래버스 방법을 사용하여 작동 범위를 정의하는 것입니다.

권장되는 HTML 구조는 다음과 같습니다.

 <div class="action" id="action" title="action">
   
   <div class="mydiv">
       <div>  모든 ellect  <br>
       <div>  <br>
       <div>  항목 2  <br>
       <div>  <br>
   </div>

   
   <div class="mydiv">
       <div>  모든 셀렉션  <br>
       <div>  항목 a  <br>
       <div>  항목 b  <br>
       <div>  항목 c  <br>
       <div>  <br>
       <div>  item e 
   </div>
</div>
<p> <strong>구조적 요점 :</strong></p>
<ul>
<li> <strong>MyDIV 클래스 :</strong> 각 독립 체크 박스 그룹은 MyDIV 클래스와 함께 DIV 요소로 래핑됩니다. 이 클래스 이름은 Key이므로 jQuery를 통해 특정 확인란 그룹을 쉽게 찾을 수 있습니다.</li>
<li> <strong>SelectAll Class :</strong> 각 그룹의 "모든 선택"확인란은 selectall 클래스를 추가해야합니다. 이를 통해이 특별한 확인란을 정확하게 선택하고들을 수 있습니다.</li>
<li> <strong>이름 속성 :</strong> 이 예제의 모든 확인란의 이름 속성은 실제 응용 프로그램에서 행동이지만, 의미 론적 및 양식 제출을 향상시키기 위해 다른 이름 속성이 다른 확인란에 대해 설정 될 수 있지만 DOM 구조를 기반으로 작동하기 때문에이 자습서의 "선택"로직에 영향을 미치지는 않습니다.</li>
</ul>
<h3> jQuery 구현 로직</h3>
<p> 두 개의 메인 이벤트 리스너를 통해 "All/No Select All Select"기능을 구현합니다. 하나는 "모든 선택"확인란의 클릭 이벤트를 처리하는 데 사용되며 다른 하나는 그룹의 다른 일반 확인란의 클릭 이벤트를 처리하는 데 사용됩니다.</p>
<h4> 1. "모든 선택"확인란의 클릭 이벤트 제어</h4>
<p> 사용자가 "모든 선택"확인란을 클릭하면 현재 선택한 상태에 따라 동일한 그룹의 다른 모든 확인란을 확인하거나 선택 취소해야합니다.</p>
<pre class="brush:php;toolbar:false"> $ ( '. selectall'). on ( 'click', function () {
  // 현재의 선택된 상태를 가져옵니다.

  // 가장 가까운 부모를 찾습니다.
    // "모든 선택"확인란의 선택된 상태를 "모든 선택"확인란 $ (this) .prop ( 'Checked, isselected)와 일치하도록 설정합니다.
  });
});

코드 구문 분석 :

• $ ( '. selectall'). on ( 'click', function () {...}); : selectall 클래스가있는 확인란의 모든 클릭 이벤트를 듣습니다.
• isselected = $ (this) .is ( ': Checked'); : 현재 클릭 된 "모든 선택"확인란의 선택된 상태 (true 또는 false)를 가져옵니다.
• $ (this) .parents ( '. mydiv') : 이것은 핵심 단계입니다. 그것은 dom 트리를 위쪽으로 가로 지르고 현재 클릭중인 MyDiv 클래스에서 가장 최근의 부모 요소를 찾습니다. 이렇게하면 작동이 현재 확인란이 속한 그룹으로 제한되도록합니다.
• .find ( 'input [type = "checkbox"]') : 찾은 .mydiv 요소 내에서 유형 확인란의 모든 입력 요소를 찾으십시오.
• .Each (function () {...}); :이 발견 된 확인란을 반복합니다.
• $ (this) .prop ( 'checked, isselected); : prop () 메소드를 사용하여 각 확인란의 확인 된 속성을 설정하십시오. Prop ()는 특히 부울 속성에 요소 특성을 조작하는 권장 방법입니다.

2. 독립적 인 확인란의 연결을 제어하십시오

사용자가 그룹의 모든 확인란을 선택하지 않은 모든 확인란을 클릭하면 동일한 그룹의 모든 확인란을 선택하여 그룹 내 "모든 선택"확인란을 확인하거나 선택 취소할지 여부를 결정해야합니다.

 $ ( 'input : not ( ". selectall")'). on ( 'click', function () {
  // 확인란이 현재 클릭 된 가장 가까운 부모를 가져옵니다 .MyDiv 요소 $ parentdiv = $ (this) .parents ( '. myDiv');

  // 그룹의 "모든 선택"확인란의 DOM 요소를 가져옵니다.

  // 그룹의 모든 선택이 아닌 모든 확인란의 수를 가져옵니다. Total indibludualInputs = $ parentDiv.Find ( 'input : not ( ". selectAll")). 길이;

  // 그룹의 선택하지 않은 모든 선택된 모든 확인란의 수를 가져옵니다.

  // 논리적 판단 :
  // 1. "모든 선택"확인란이 현재 선택되었지만 독립 확인란이 선택되지 않은 경우 "All을 선택하십시오"취소.
  if (selectAllCheckbox.Checked && checkedibleAdualInputs <total individualinputs selectallcheckbox.checked="false;" else if checked><p> <strong>코드 구문 분석 :</strong></p>
<ul>
<li> $ ( 'input : not ( ". selectall")'). on ( 'click', function () {...}); : selectall 클래스의 입력 유형 확인란이 아닌 모든 클릭 이벤트를 듣습니다.</li>
<li> $ parentdiv = $ (this) .parents ( '. mydiv'); : 마찬가지로, 현재 클릭 수표 확인란이 작동 범위를 제한하기 위해 .MyDiv 부모 요소를 찾으십시오.</li>
<li> selectallcheckbox = $ parentdiv.find ( '. selectall') [0]; : 현재 그룹에서 "모든 선택"확인란의 DOM 요소를 찾으십시오. 확인 된 속성은 기본 DOM 속성이기 때문에 [0]은 기본 DOM 요소를 얻는 것입니다.</li>
<li> Total indiblualInputs 및 checkedibleualInputs : 그룹의 모든 확인란의 총 수와 선택한 확인란의 수를 각각 계산하십시오.</li>
<li> <strong>조건부 판단 :</strong><ul><li> 첫 번째 IF 조건 : "모든 선택"확인란이 선택되면 (selectAllCheckbox.Checked), 실제로 선택한 독립 확인란의 수는 전체 (CheckedIduidualInputs <total individualinputs><li> 두 번째 다른 경우 : 조건 : 모든 독립적 인 확인란이 선택된 경우 (Total individualInputs === checkedidudualInputs) "모든 선택"확인란이 자동으로 선택됩니다.</li></total>
</li></ul>
</li>
</ul>
<h3> 완전한 샘플 코드</h3>
<p> 위의 HTML 구조와 JQuery 코드를 결합하고 JQuery 라이브러리를 페이지에 소개하여 필요한 기능을 달성하십시오.</p>
<pre class="brush:php;toolbar:false"> 


    <meta charset="utf-8">
    <meta name="viewport" content="width = device-width, 초기 스케일 = 1.0">
    <title> jQuery 여러 그룹 모든 확인란을 선택하십시오. </title>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
    
        .mydiv {
            국경 : 1px Solid #CCC;
            패딩 : 10px;
            마진 바닥 : 15px;
            배경색 : #f9f9f9;
        }
        .mydiv div {
            마진 바닥 : 5px;
        }
    스타일>



<div class="action" id="action" title="action">
   <div class="mydiv">
       <div>  ** 모든 동작 선택 **  <br>
       <div>  프로파일보기  <br>
       <div>  설정 설정  <br>
       <div>  <br>
   </div>

   <div class="mydiv">
       <div>  ** 모든 권한을 선택 **  <br>
       <div>  액세스  <br>
       <div>  쓰기 액세스  <br>
       <div>  execute access  <br>
       <div>  관리자 권한  <br>
       <div>  감사 로그 
   </div>
</div>

<cript>
$ (document) .ready (function () {
    // event $ ( '. selectall'). on ( 'click', function () {클릭하십시오.
        isselected = $ (this) .is ( ': checked');
        $ (this) .parents ( '. mydiv'). 찾기 ( 'input [type = "checkbox"]'). prop ( 'checked', isselected);
    });

    // event $ ( 'input : not ( ". selectall")'). on ( 'click', function () {클릭하십시오.
        $ parentdiv = $ (this) .parents ( '. mydiv');
        selectallcheckbox = $ parentdiv.find ( '. selectall') [0];

        Total indindiblualInputs = $ parentdiv.find ( 'input : not ( ". selectall")'). 길이;
        checkediblidualinputs = $ parentdiv.find ( '입력 : 확인 : not ( ". selectall")'). 길이;

        // 선택이 확인되지만 일부 어린이가 확인되지 않은 경우 모든 IF (selectAllCheckBox.Checked && checkedibleAdualInputs <total individualinputs selectallcheckbox.checked="false;">


</total></cript>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>