기본 아이디어는 셀을 선택하고 인덱스를 가져 와서 해당 인덱스가있는 테이블의 다른 테이블 셀을 선택하는 것입니다.
$("th input[type='checkbox']").on("change", function() {
var cb = $(this), //checkbox that was changed
th = cb.parent(), //get parent th
col = th.index() + 1; //get column index. note nth-child starts at 1, not zero
$("tbody td:nth-child(" + col + ") input").prop("checked", this.checked); //select the inputs and [un]check it
});th { background-color: #CCC; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>
<input type="checkbox">
</th>
<th>
<input type="checkbox">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
</tr>
</tbody>
</table>가지고있는 것처럼 인라인 이벤트 핸들러를 사용하여 수행하려는 경우 코드는 다음과 같습니다.
function CheckHeaderCheckboxAll(obj) {
var cb = $(obj), //checkbox that was changed
th = cb.parent(), //get parent th
col = th.index() + 1; //get column index. note nth-child starts at 1, not zero
$("tbody td:nth-child(" + col + ") input").prop("checked", obj.checked); //select the inputs and [un]check it
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다