프로그래밍/Jquery&
jquery 체크박스 전체 선택 및 해제
NINEDC
2017. 6. 14. 15:30
jquery 체크박스 전체 선택 및 해제
html
<table border="1">
<tr>
<td><input type="checkbox" id="checkall" /></td>
<td>내용</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" /></td>
<td>테스트내용입니다테스트내용입니다</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" /></td>
<td>안녕하세요개발로짜입니다안녕하세요개발로짜입니다</td>
</tr>
</table>
-----------------------------------------------------------------------------------------
jquery
type 1 : 특정 name의 check
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
//최상단 체크박스 클릭
$("#checkall").click(function(){
//클릭되었으면
if($("#checkall").prop("checked")){
//input태그의 name이 chk인 태그들을 찾아서 checked옵션을 true로 정의
$("input[name=chk]").prop("checked",true);
//클릭이 안되있으면
}else{
//input태그의 name이 chk인 태그들을 찾아서 checked옵션을 false로 정의
$("input[name=chk]").prop("checked",false);
}
})
})
</script>
type 2 : 모든 체크박스
<script>
$(function(){
$("#checkall").click(function(){
if($("#checkall").prop("checked")){
$("input[type=checkbox]").prop("checked",true);
}else{
$("input[type=checkbox").prop("checked",false);
}
});
});
</script>
----------------------------------------------------------------
type 3 : 심플하게 class명으로 처리(개인적으로 가장 좋아하는 방법)
<script>
$(function(){
$("#checkall").click(function(){
if($("#checkall").prop("checked")){
$(".chkbox").prop("checked",true);
}else{
$(".chkbox").prop("checked",false);
}
});
});
</script>
반응형