jquery로 구현된 전체 선택 및 역선택

웹사이트 기능이 지속적으로 개선되면서 체크박스의 적용이 점점 더 광범위해지고 있습니다. 체크박스의 개수가 많을 경우 전체 선택 또는 선택 반전 기능을 제공하여 사용자가 조작하기 매우 편리합니다. JQuery 라이브러리는 이 기능을 쉽게 구현할 수 있도록 해당 API를 제공합니다.

1. 모두 선택 기능 구현

모두 선택 기능은 모든 확인란을 선택하고 선택한 상태를 선택한 상태로 전환할 수 있는 사용자 작업을 의미합니다. 전체 선택을 구현하는 jQuery의 코드는 다음과 같습니다.

 $("#checkAll").click(function () {
        $('input[type="checkbox"]').prop('checked', this.checked);
 });

위 코드에서 $ 기호는 id가 checkAll인 요소를 클릭하면 해당 입력 유형의 모든 요소에 대한 상태 확인을 나타냅니다. 확인란이 선택됨으로 설정되어 있습니다. 즉, this.checked 상태입니다.

2. 역선택 기능 구현

역선택 기능은 사용자가 선택되지 않은 체크박스를 모두 선택할 수 있고, 선택된 체크박스는 선택해제되는 것을 의미합니다. 역방향 선택을 위한 jQuery 코드는 다음과 같습니다.

 $("#reverseSelect").click(function () {
        $('input[type="checkbox"]').each(function () {
            this.checked = !this.checked;
        });
 });

위 코드에서 $ 기호를 클릭하면 입력 유형 체크박스가 있는 각 요소를 순회하며 체크 상태를 반전시킵니다. 원래 선택되어 있으면 선택 취소되고, 그렇지 않으면 선택됩니다.

3. 모두 선택 및 선택 반전의 포괄적인 기능 구현

모두 선택과 선택 반전 기능을 동시에 구현해야 하는 경우 다음을 달성하도록 코드를 수정할 수 있습니다.

$("#checkAll").click(function () {
        $('input[type="checkbox"]').prop('checked', this.checked);
 });
$("#reverseSelect").click(function () {
        $('input[type="checkbox"]').each(function () {
            this.checked = !this.checked;
        });
 });

In 위 코드에서 두 함수를 checkAll 및 id reverseSelect를 사용하여 버튼의 id에 각각 바인딩합니다. 이 두 버튼은 각각 전체 선택 기능과 선택 반전 기능에 해당합니다.

일반적으로 jQuery에서 제공하는 전체 선택 및 선택 반전 기능은 사용자 작업의 편의성을 크게 향상시킬 수 있습니다. 이 구현은 간단하고 사용하기 쉬우며 다양한 유형의 웹사이트에 적용할 수 있습니다.

위 내용은 jquery로 구현된 전체 선택 및 역선택의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!