jQuery 구현 다중 지역 확인란 연결 제어 : 모두 및 역 선택 기능 안내서

이 튜토리얼은 jQuery를 사용하여 여러 영역에서 확인란의 모든 및 선택적 선택 기능을 구현하는 방법에 대해 자세히 설명합니다. 각 독립 영역에 대해 모든 확인란을 선택하고 상태 변경을 듣고 해당 영역의 모든 하위 점검 상자의 선택한 상태를 자동으로 동기화합니다. 동시에, 영역의 하위 체크 상자의 상태가 사용자 인터페이스 로직의 무결성과 일관성을 보장하기 위해 "모든 선택"확인란의 상태를 동적으로 업데이트하는 방법도 다룹니다.

핵심 개념 및 HTML 구조 최적화

복잡한 형태 또는 데이터 표시 시나리오에서는 종종 확인란 세트에서 "모두 선택"또는 "모든 선택"작업을 수행해야합니다. 페이지에 여러 개의 독립적 인 확인란 그룹이 있으면 각 그룹은 자체 "모든 선택"기능을 가져야하며 서로 영향을 미치지 않습니다. 이 기능을 구현하는 핵심은 다음과 같습니다.

1. 명확한 면적 경계 : 각 독립 체크 박스 그룹에 대해 공통 상위 컨테이너를 정의하고 jQuery가 작동 범위를 정확하게 정의하도록 고유 한 신원 또는 클래스 이름을 제공합니다.
2. 모든 확인란 선택을 식별하십시오 . 각 그룹 내의 모든 확인란을 선택하여 선택기가 쉽게 식별 할 수 있도록 특정 클래스 이름을 할당하십시오.

위의 원리를 기반으로 원래의 HTML 구조를 최적화하고 MyDIV 클래스를 소개하여 독립적 인 확인란 그룹을 식별하고 SelectAll 클래스를 소개하여 "모든 선택"확인란을 식별합니다.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<div class="action" id="action" title="action">
   
   <div class="mydiv">
       <div>  <br>
       <div>  항목 1  <br>
       <div>  item 2  <br>
       <div>  항목 3  <br>
   </div>

   
   <div class="mydiv">
       <div>  모든  <br>
       <div>  항목 27  <br>
       <div>  항목 28  <br>
       <div>  항목 29  <br>
       <div>  항목 30  <br>
       <div>  항목 31 
   </div>
</div>
<p> 위의 코드에서는 각 독립 체크 박스 그룹을 MyDIV 클래스로 래핑하고 각 그룹의 "모든 선택"확인란에서 SELECTALL 클래스를 추가합니다.</p>
<h3> jQuery 구현 로직</h3>
<p> 다음으로 jQuery를 사용하여 각각 두 개의 메인 이벤트 처리기를 작성하여 "모든 선택"확인란 및 일반 확인란의 클릭 이벤트를 처리합니다.</p>
<h4> 1.“ALL/NO SELECT ALL SELECT”확인란의 제어</h4>
<p> 사용자가 "모든 선택"확인란을 클릭하면 현재 선택한 상태에 따라 동일한 그룹에서 다른 모든 확인란의 선택된 상태를 동기화해야합니다.</p>
<pre class="brush:php;toolbar:false"> $ ( '. selectall'). on ( 'click', function () {
  // 현재의 선택된 상태를 가져옵니다.

  // 가장 가까운 부모 .myDiv 요소를 위쪽으로 찾은 다음 $ (this) .parents ( '. myDiv'). 찾기 ( 'input [type = "checkbox"]'). 각 (function () {
    // "모든 선택"확인란 $ (this) .prop ( 'Checked, isselected)과 일치하는 모든 체크 박스의 선택된 상태를 동일한 그룹에서 설정합니다.
  });
});

설명하다:

• $ ( '. selectall'). on ( 'click', function () {...}) : selectall 클래스의 확인란을 사용하여 모든 클릭 이벤트를 듣습니다.
• $ (this) .is ( ': Checked') : 현재 클릭 된 "모든 선택"확인란의 선택한 상태 (true 또는 false)를 가져옵니다.
• $ (this) .parents ( '. mydiv') : 현재 클릭 한 "모든 선택"확인란에서 가장 가까운 부모 MyDiv 요소를 찾으십시오. 이를 통해 작동은 현재 확인란이있는 그룹으로만 제한되도록합니다.
• .find ( 'input [type = "checkbox"]') : 찾은 MyDiv 내에서 "모든 선택"확인란 자체를 포함하여 입력 유형 확인란의 모든 요소를 찾으십시오.
• .Each (function () {...}) : 발견 된 모든 확인란을 통해 반복합니다.
• $ (this) .prop ( 'Checked', isselected) : 각 확인란의 확인 된 속성을 설정하여 isselected 상태와 일치하도록합니다.

2. 일반 확인란의 연결 제어

사용자가 그룹의 일반 확인란을 클릭하면 그룹 내 모든 일반 확인란의 선택된 상태를 기반으로 "모든 선택"확인란의 상태를 동적으로 업데이트해야합니다. 특정 논리는 다음과 같습니다. 모든 일반 확인란이 선택되면 "모든 선택"확인란도 선택해야합니다. 그렇지 않으면 "모든 선택"확인란이 원래 선택된 경우 선택하지 않아야합니다.

 $ ( 'input : not ( ". selectall")'). on ( 'click', function () {
  // 현재 확인란이있는 곳에 부모를받습니다. $ parentdiv = $ (this) .parents ( '. mydiv');
  //이 그룹의 "모든 선택"확인란을 가져옵니다.

  // "모든 선택"확인란을 제외한이 그룹의 모든 확인란의 수를 통계하십시오.
  // "모든 선택"확인란을 제외 하고이 그룹에서 선택한 확인란의 수를 통계하십시오.

  // 모든 일반 확인란이 선택되면 "모든 선택"확인란을 선택하십시오.
    $ selectAllCheckbox.Prop ( 'Checked', True);
  } 또 다른 {
    // 그렇지 않으면 "모든 선택"확인란을 선택 취소 $ selectallcheckbox.prop ( 'Checked', false);
  }
});

설명하다:

• $ ( 'input : not ( ". selectall")'). on ( 'click', function () {...}) : selectall 클래스 확인란이 없는 모든 클릭 이벤트를 듣습니다.
• $ parentdiv = $ (this) .parents ( '. mydiv'); : 현재 클릭중인 일반 확인란이있는 MyDiv 부모 요소를 얻으십시오.
• $ selectallcheckbox = $ parentdiv.find ( '. selectall'); : 해당 "모든 선택"확인란을 찾으십시오.
• $ parentdiv.find ( 'input : not ( ". selectall")').
• $ parentdiv.find ( '입력 : 확인 : not ( ". selectall")).
• TotalCheckboxes와 CheckedCheckboxes를 비교하여 모든 일반 확인란이 선택되었는지 여부를 결정하고 그에 따라 $ selectAllCheckbox의 선택된 상태를 업데이트하십시오.

완전한 jQuery 코드 예제

위의 두 논리를 함께 통합하고 DOM로드 후 실행하십시오.

 $ (document) .ready (function () {
    // 1. "ALL/NO SELECT"ALL SELECT "Check Box $ ( '. selectAll')의 제어 로직. on ( 'click', function () {
        isselected = $ (this) .is ( ': checked');
        $ (this) .parents ( '. mydiv'). 찾기 ( 'input [type = "checkbox"]'). prop ( 'checked', isselected);
    });

    // 2. 정상 확인란의 연결 제어 로직 $ ( 'input : not ( ". selectall")'). on ( 'click', function () {
        $ parentdiv = $ (this) .parents ( '. mydiv');
        $ selectallcheckbox = $ parentdiv.find ( '. selectall');

        TotalCheckboxes = $ parentDiv.Find ( 'input : not ( ". selectall")'). 길이;
        checkedcheckboxes = $ parentdiv.find ( '입력 : 확인 : not ( ". selectall")). 길이;

        // 모든 일반 확인란이 선택되면 "모든 선택"확인란을 선택하십시오.
            $ selectAllCheckbox.Prop ( 'Checked', True);
        } 또 다른 {
            // 그렇지 않으면 "모든 선택"확인란을 선택 취소 $ selectallcheckbox.prop ( 'Checked', false);
        }
    });
});

메모 및 모범 사례

• 선택기 정확도 : .parents ( '. mydiv')와 .find ()의 조합을 사용하는 것이 작업이 현재 그룹으로 제한되도록하는 열쇠입니다. 다른 그룹 간의 논리적 혼란을 방지하기 위해 글로벌 선택기를 사용하지 마십시오.
• 이벤트 대표단 : 동적으로로드 된 확인란의 경우 클릭 이벤트의 직접 바인딩이 유효하지 않을 수 있습니다. 이 경우 이벤트 대의원을 사용하여 이벤트를 부모 요소에 바인딩하는 것이 좋습니다.

   $ (document) .on ( 'click', '.selectall', function () { / * ... * /});
  $ (document) .on ( 'click', 'input : not ( ". selectall")', function () { / * ... * /});

  이렇게하면 요소가 DOM에 동적으로 추가 된 후에도 이벤트 리스너가 제대로 작동합니다.

• 초기 상태 처리 : 페이지가로드 될 때 일부 확인란이 이미 선택된 경우 "모든 선택"확인란의 초기 상태가 올바른지 확인하려면 $ (문서) .ready ()를 수행해야 할 수도 있습니다. 예를 들어, 일반 확인란 클릭 이벤트를 수동으로 트리거하거나 (가장 우아한 방법은 아닐 수도 있음) 초기화 기능을 작성하여 확인하고 설정할 수 있습니다.
• 사용자 경험 : 모든 하위 체크 상자가 비활성화 될 때 "모든 선택"확인란의 동작을 고려하십시오. 일반적으로 모든 어린이가 선택되지 않은 경우 모든 확인란을 선택하지 않거나 숨겨야합니다.
• 성능 고려 사항 : 많은 수의 확인란이있는 복잡한 페이지의 경우 빈번한 DOM 작업이 성능에 영향을 줄 수 있습니다. 그러나 가장 일반적인 시나리오의 경우 위의 접근 방식은 이미 충분히 효율적입니다. 성능 병목 현상이 발생하면 가상 DOM 라이브러리 또는 더 미세한 DOM 운영 최적화를 고려할 수 있습니다.

요약

이 튜토리얼을 통해 jQuery를 사용하여 지능적인 "ALL SELECT"및 "SELECT"LINGAGE 기능을 얻는 방법을 배웠습니다. 핵심은 명확한 HTML 구조 설계 (공통 상위 컨테이너 클래스와 특정 클래스를 사용하여 "모든"확인란을 식별)뿐만 아니라 정확한 jQuery 선택기 및 이벤트 처리 로직에 있습니다. 이는 사용자 인터페이스의 상호 작용성을 향상시킬뿐만 아니라 프론트 엔드 개발에서 확인란 관리 작업을 크게 단순화합니다. 이러한 기술을 마스터하면보다 강력하고 사용자 경험 웹 애플리케이션을 구축하는 데 도움이됩니다.