이 기사에서는 JavaScript를 사용하여 모든 확인란을 선택 및 선택 해제하는 방법을 보여줍니다.
JavaScript를 사용하여 모든 확인란을 선택하고 선택 취소하는 방법은 무엇입니까?
JavaScript의 모든 확인란을 선택 및 선택 취소하려면 다음을 적용할 수 있습니다.
언급된 접근 방식은 이제 하나씩 논의될 것입니다!
방법 1: 'checkboxes'와 함께 'document.getElementsByName()' 메서드를 사용하여 JavaScript의 모든 확인란 선택 및 선택 취소
' 문서.getElementsByName() ' 메서드는 인수에 지정된 이름을 가진 요소를 반환합니다. 이 메서드는 전달된 이름의 도움으로 각 확인란의 값을 가져오는 데 적용됩니다.
데모를 위해 다음 예제를 살펴보겠습니다.
예시
먼저 입력 유형은 ' 체크박스 ' 및 각 확인란에 대해 특정 이름과 값이 할당됩니다.
< 입력 유형 = '체크박스' 이름 = '단지' 값 = '파이썬' > 파이썬 < 브 />< 입력 유형 = '체크박스' 이름 = '단지' 값 = '자바' > 자바 < 브 />
< 입력 유형 = '체크박스' 이름 = '단지' 값 = '자바스크립트' > 자바스크립트 < 브 />
이제 ' 모두 확인 '를 붙이고 ' 클릭() ' 이 확인란이 있는 이벤트는 확인란을 클릭할 때 ' 체크해제 ()'메소드는 '객체와 함께 호출됩니다. 이것 '를 인수로:
< 입력 유형 = '체크박스' 클릭 = 'checkUncheck(이것)' /> 모두 확인 < 브 />
그런 다음 ' 체크 해제() '라는 변수를 사용하여 JavaScript 파일에서 ' 체크박스 '를 논거로 삼는다. 이제 ' 문서.getElementsByName() ' 방법을 선택하고 '의 값을 배치합니다. 이름 ' 속성을 인수로 사용합니다.
마지막으로 ' ~을 위한 ' 루프를 사용하여 모든 확인란 값을 반복하고 ' 체크 ” 속성을 사용하여 모두 선택한 것으로 표시합니다.
기능 체크 체크 해제 ( 체크박스 ) {가져 오기 = 문서. getElementsByName ( '단지' ) ;
~을 위한 ( 에 있었다 = 0 ; 나 < 가져 오기. 길이 ; 나 ++ ) {
가져 오기 [ 나 ] . 체크 = 체크박스. 체크 ; }
}
보시다시피 ' 모두 확인 ' 확인란이 표시되고 다른 모든 확인란도 선택된 것으로 표시됩니다.
방법 2: '버튼'이 있는 'document.getElementsByName()' 메서드를 사용하여 JavaScript의 모든 확인란 선택 및 선택 취소
' 문서.getElementsByName() ” 메서드는 이전 메서드에서 설명한 대로 인수에 지정된 이름을 가진 요소를 가져옵니다. 웹 페이지에 추가된 모든 체크박스를 체크하거나 체크 해제하는데 활용될 수 있습니다.
데모를 위해 다음 예를 보십시오.
예시
이제 ' 모두 확인 ' 그리고 ' 모두 선택 취소 ' 기능. 그런 다음 ' 클릭 ” 이벤트는 지정된 기능에 개별적으로 액세스하는 두 버튼을 모두 사용합니다.
< 입력 유형 = '단추' 클릭 = '확인하다()' 값 = '모두 확인' />< 입력 유형 = '단추' 클릭 = '체크 해제()' 값 = '모두 체크 해제' />
다음으로 ' 확인하다() '를 적용하고 ' document.getElementsByName '의 지정된 값으로 '메소드' 이름 ' 기인하다. 그런 다음 ' ~을 위한 '는 이전 방법에서 설명한 모든 확인란 값을 따라 반복합니다.
또한 관련 버튼을 클릭하면 ' 체크 ' 속성은 모든 확인란을 표시하고 선택된 상태를 ' 진실 ':
기능 점검 ( ) {염소가 되다 = 문서. getElementsByName ( '확인하다' ) ;
~을 위한 ( 에 있었다 = 0 ; 나 < 가져 오기. 길이 ; 나 ++ ) {
가져 오기 [ 나 ] . 체크 = 진실 ; }
}
다음으로 ' 체크 해제() ', 그 안에 역기능을 추가하여 체크박스 속성을 '로 표시합니다. 거짓 ':
기능 체크 해제 ( ) {염소가 되다 = 문서. getElementsByName ( '확인하다' ) ;
~을 위한 ( 에 있었다 = 0 ; 나 < 가져 오기. 길이 ; 나 ++ ) {
가져 오기 [ 나 ] . 체크 = 거짓 ; }
}
추가된 버튼이 완벽하게 작동하는 것을 출력에서 확인할 수 있습니다.
JavaScript를 사용하여 모든 확인란을 선택 및 선택 취소하는 가장 쉬운 방법을 제공했습니다.
결론
JavaScript를 사용하여 모든 확인란을 선택 및 선택 취소하려면 ' 문서.getElementsByName() '와 ' 체크박스 '를 사용하여 확인란을 추가하고 기능에 액세스하면 확인란이 선택되거나 '와 동일한 방법이 적용됩니다. 버튼 '를 사용하여 지정된 모든 값을 확인 및 선택 해제하기 위한 두 개의 버튼을 별도로 포함합니다. 이 글에서는 JavaScript를 사용하여 모든 확인란을 선택 및 선택 해제하는 방법을 설명했습니다.