[jQuery] checkbox 의 리스트 중 체크된 값 가져오기

 

<div>
	<table>
    	<caption>List</caption>
        <colgroup>
          <col width="30%">
          <col width="30%"> 
          <col width="*%"> 
        </colgroup>
        <thead>
        	<tr>
              <th scope="col"><input type="checkbox" id="check-all"><label for="check-all">Check</label></th>
              <th scope="col"><a>번호</a></th>
              <th scope="col"><a>이름</a></th>
            </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="checkbox" name="chkList" id="check-1" value="1"><label for="check-1">Check</label></td>
            <td>1</td>
            <td><a>철수</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="chkList" id="check-2" value="2"><label for="check-2">Check</label></td>
            <td>2</td>
            <td><a>영수</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="chkList" id="check-3" value="3"><label for="check-3">Check</label></td>
            <td>3</td>
            <td><a>토마스</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="checkList" id="check-4" value="4"><label for="check-4">Check</label></td>
            <td>4</td>
            <td><a>순이</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="chkList" id="check-5" value="5"><label for="check-5">Check</label></td>
            <td>5</td>
            <td><a>창모</td>
          </tr>        
        </tbody>
        
    </table>
</div>

 

jQuery의 checkbox 여부 확인

jQuery를 활용하여 checkbox 리스트의 전체 갯수와 checked 된 갯수를 확인 가능합니다.

// checkbox의 전체 갯수
$("input:checkbox[name=chkList]").length
 
// checkbox의 선택된 갯수
$("input:checkbox[name=chkList]:checked").length
 
// checkbox의 전체 체크
$("input[name=chkList]:checkbox").prop("checked", true);
 

 

jQuery의 each문을 통하여 checked된 value 값 가져오기

each 반복문을 통하여 checkbox의 체크된 대상들만 지정하여 value 값을 가져옵니다.

let chk_Val = [];

$("input:checkbox[name=chkList]").each(function(i,iVal) {
	chk_Val.push(iVal);
});

console.log(chk_Val);