"check all"자바 스크립트 메서드를 생성하는 방법

Question

나는 h : table (간단한 html 테이블)의 모든 체크 박스를 확인하는 자바 스크립트 메소드를 호출하는 버튼을 어떻게 만들 수 있는지 관심 있어요? 그리고 자바 스크립트 메서드로 테이블의 모든 체크 박스를 다시 체크하지 않게하려면 어떻게해야합니까? 코드를 잘라내거나 예제로 보여 주시겠습니까?

Answer 1

당신은 아주 쉽게 jQuery를 사용하여이 작업을 수행 할 수 있습니다 :

체크 모든

$("[type=checkbox]").prop("checked", true); 

의 선택을 취소 모든 : 버튼에 따라서

$("[type=checkbox]").prop("checked", false); 

:

<input type="checkbox" name="a">a<br/> 
<input type="checkbox" name="b">b<br/> 
<input type="checkbox" name="c">c<br/> 
<input type="checkbox" name="d">d<br/> 
<input type="checkbox" name="e">e<br/> 
<button data-action="check">Check All</button> 
<button data-action="uncheck">Uncheck All</button>​ 

$('button').click(function() { 
    $("[type=checkbox]").prop("checked", $(this).data('action') === 'check'); 
})​ 

바이올린 :,153,210

Answer 2

<h:table> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
</h:table> 

<script> 
    function checkBoxesForMe(checkBoxesOn) 
    { 
     var table = document.getElementsByTagName('h:table')[ 0 ] 
     var inputs = table.getElementsByTagName('input') 

     for(var i = 0; i < inputs.length; i ++) 
     { 
      if(inputs[ i ].type == 'checkbox') 
      { 
       if(checkBoxesOn) 
        inputs[ i ].setAttribute('checked', true) 
       else 
        inputs[ i ].removeAttribute('checked') 
      } 
     } 
    } 
</script> 

Answer 3

1. 버튼 버튼에
2. Add an event listener을 만듭니다. 수신기에서 다음을 수행합니다.
   1. 모든 확인란을 선택하려는 테이블 요소를 선택합니다 (예 : 입력의 목록을 통해 입력 요소에 대한 by Id
   2. 사용 getElementsByTagName
   3. 루프 :
      • the input의 타입을 "확인란"인 경우, true

Answer 4

에 그 checked 속성을 설정

다음 함수는 자명해야합니다.

function checkboxesCheckAll() { 
    var boxes = document.getElementsByTagName('input'); 
    var i = boxes.length; 
    while (i--) { 
    if (boxes[i].type == 'checkbox') boxes[i].checked = true; 
    } 
} 

function checkboxesCheckNone() { 
    var boxes = document.getElementsByTagName('input'); 
    var i = boxes.length; 
    while (i--) { 
    if (boxes[i].type == 'checkbox') boxes[i].checked = false; 
    } 
} 

function checkboxesCheckToggle() { 
    var boxes = document.getElementsByTagName('input'); 
    var i = boxes.length; 
    while (i--) { 
    if (boxes[i].type == 'checkbox') boxes[i].checked = !boxes[i].checked; 
    } 
} 

또는 하나의 함수로 작성하고 매개 변수를 전달하여 매개 변수를 전달하여 확인, 취소 또는 토글 할 수 있습니다.