JQuery는 목록의 모든 확인란을 선택하고 반전시키는 캡슐화를 구현합니다.

목록을 만들 때 일괄 처리를 위해 모두 선택하고 선택을 반전시키는 문제에 자주 직면합니다. 예를 들면 다음과 같습니다.

당시에는 간단히 구현했지만, 공개 js에서는 캡슐화가 너무 안 좋아서 포스팅하기가 부끄럽습니다(즉, 구현 코드를 공개 js에 넣은 다음 각 페이지마다 고정 ID와 클래스를 사용합니다. 이제 저는 생각해 보세요. Encapsulated라고 부르기가 부끄럽습니다. 그러다가 사장님이 이 기능을 어떻게 작성했는지 살펴보겠습니다. 이것을 비교하지 않고는 아무런 해가 없습니다.

$(':checkbox[data-check-target]').click(function () {
var target = $(this).attr('data-check-target');
if ($(this).prop('checked')) {
$(target).prop('checked', true);
} else {
$(target).prop('checked', false);
}
});

.

우선 여기의 높은 캡슐화가 반영됩니다. js와 html이 분리된 후 연결 브리지에 사용되는 사용자 정의 data-check-target 속성은 하나만 있습니다(당시에는 모두 선택). 체크박스, 하위 체크박스, 관련 포인트를 모두 사용하면 캡슐화 효과가 없고, js와 html 간의 결합이 너무 큽니다.) (위의 js를 보고 어떻게 해야 할지 고민 중이었습니다. 세 가지 관련 항목을 연결 지점을 통해 연결)

다음으로 구체적인 용도를 계속 살펴보겠습니다.

모두 선택 확인란이 js에 연결된 브리지의 사용자 정의 속성 data-check-에 사용됩니다. 대상은 약간 특별합니다:

<input type="checkbox" data-check-target=".id-checkbox" />

해당 값은 ".id-checkbox"로, 이상해 보입니다. 하위 체크박스 구현을 살펴보려면:

<input type="checkbox" name="ids[]" value="@item.Id" class="id-checkbox" />

갑자기 하위 체크박스의 클래스 이름이 사용자 정의 속성 data-check-target

var target = $(this).attr('data-check-target');

그런 다음 사용자 정의 속성 data-check-target이 하위 확인란의 클래스를 가져옴으로써 높은 캡슐화를 달성합니다.

제가 요약한 것은 js와 html은 사용자 정의 속성 data-check-target 통신을 전달하고 하위 확인란은 모두 선택 확인란의 사용자 정의 속성 data-check-target 값에 따라 달라집니다.

이 예는 다음과 같습니다. 코딩도 어렵지 않고, 이해하기 어려운 부분도 없습니다. 커스텀 속성을 통해 교묘하게 구현한 것이 바로 이 코드의 난이도이자 핵심입니다. 내 내면의 감탄을 억제하지 마십시오. 이 코드 줄은 너무 아름답습니다.

PS: 위의 js가 attr 대신 prop을 사용하는 이유는 무엇입니까? 왜냐하면: 현재 입력에서 초기화될 때 확인된 속성이 정의되지 않은 경우 요소에 지정된 확인된 속성이 없으므로 .attr( )은 정의되지 않은 값을 반환합니다.

HTML 요소 자체의 고유 속성은 처리 시 prop 메서드를 사용하세요.

HTML 요소의 자체 사용자 정의 DOM 속성을 처리할 때 attr 메소드를 사용하세요.

위는 체크박스 선택과 역선택 기능을 목록에 캡슐화하기 위해 편집자가 소개한 JQuery 구현입니다(권장). 궁금한 점이 있으면 도움이 되길 바랍니다. 메시지를 남겨주시면 편집자가 즉시 답변해 드리겠습니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

목록의 확인란에 대한 자세한 JQuery 구현, 모두 선택 및 선택 기능 캡슐화 관련 기사 반전에 대해서는 PHP 중국어 웹사이트를 주목하세요!