jQuery는 확인란 수를 쉽고 효율적으로 계산하는 방법을 제공하지만 순수한 JavaScript를 사용 하여이 기능을 구현할 수도 있습니다. 메소드를 사용하여 모든 확인란을 선택한 다음 메소드를 사용하여 선택한 확인란을 필터링 할 수 있습니다. 간단한 예는 다음과 같습니다.
<code class="language-javascript">$('#table :input[type="checkbox"]:checked').length</code>
이 코드는 콘솔에 선택된 확인란 수를 기록합니다.
체크 박스 수를 실시간으로 계산하는 방법은 무엇입니까?
예, jQuery의 이벤트를 사용하여 체크 박스 수를 실시간으로 계산할 수 있습니다. 이 이벤트는 확인란의 상태가 변경 될 때마다 트리거됩니다. 이 이벤트를 사용하여 확인란이 선택되거나 확인되지 않은 경우 카운트를 업데이트 할 수 있습니다. 예는 다음과 같습니다.
이 코드는 확인란이 선택되거나 확인되지 않은 경우 현재 선택된 확인란의 수를 콘솔에 기록합니다.
내 페이지에 확인란 수를 표시하는 방법은 무엇입니까? querySelectorAll
HTML 요소의 텍스트 내용을 업데이트하여 웹 페이지에 선택한 확인란 수를 표시 할 수 있습니다. 예는 다음과 같습니다.
Array.prototype.filter
이 예에서
는 계산을 위해 표시되는 HTML 요소의 ID입니다. <code class="language-javascript">let checkboxes = document.querySelectorAll('input[type="checkbox"]');
let checked = Array.from(checkboxes).filter(input => input.checked);
console.log(checked.length);</code>
특정 그룹에서 선택한 확인란 수를 계산하는 방법은 무엇입니까?
예,보다 구체적인 선택기를 사용하여 특정 그룹에서 선택한 확인란 수를 계산할 수 있습니다. 예를 들어, 확인란이 id 가있는 div 내부에 있으면 다음과 같이 그룹에서 선택한 확인란 수를 계산할 수 있습니다.
이 코드는 에서 선택한 확인란의 수를 콘솔에 기록합니다.
검사되지 않은 확인란의 수를 계산하는 방법은 무엇입니까?
.change() 선택기를 사용하여 확인되지 않은 확인란의 수를 계산할 수 있습니다. 예는 다음과 같습니다.
이 코드는 확인되지 않은 확인란의 수를 콘솔에 기록합니다. <code class="language-javascript">$('input[type="checkbox"]').change(function() {
let count = $('input[type="checkbox"]:checked').length;
console.log(count);
});</code>
