[jQuery] 제이쿼리 checkbox checked, 전체 선택, 전체 해제[체크박스]
안녕하세요 오늘은 제이쿼리로 체크박스 전체선택/전체해제
그리고 체크박스 값을 가져오는 코드를 알아볼게요.
1. ID 또는 NAME으로 체크박스의 체크여부를 가져오는 코드입니다.
$("input:checkbox[id='ID']").is(":checked") == true : false // 아이디로 체크박스 체크여부 체크
$("input:checkbox[name='NAME']").is(":checked") == true : false // 네임으로 체크박스 체크여부체크
// 또는
$("input[type='ID']").prop("checked"); // prop을 이용하여 체크박스 체크가 가능합니다.
//아래는 예제코드입니다
<script type="text/javascript">
function getCheckBoxYn(){
if($("input:checkbox[id='test01']").is(":checked") == true){
//test01 체크박스가 체크되어습니다.
}else{
//test01 체크박스가 체크되어 있지 않습니다.
}
}
</script>
<body>
<div>
<input type="checkbox" id="test01" name="test01" checked> // 체크박스
<button type="button" onClick="getCheckBoxYn()"></button> //체크박스 체크여부 펑션호출
</div>
</body>
2. ID 또는 NAME으로 체크박스 체크/해제 하는 코드입니다.
$("input:checkbox[id='ID']").prop("checked", true); //아이디로 체크박스 체크 선택하기
$("input:checkbox[name='NAME']").prop("checked", false); //네임으로 체크박스 체크 선택하기
//아래는 예제코드입니다
<script type="text/javascript">
function setCheckBox(type){
if("Y" === type){
$("input:checkbox[id='test01']").prop("checked", true); //체크하기
}else{
$("input:checkbox[name='test01']").prop("checked", false) //체크해제하기
}
}
</script>
<body>
<div>
<input type="checkbox" id="test01" name="test01" > // 체크박스
<button type="button" onClick="setCheckBox('Y')">체크하기</button> //체크박스 체크 펑션호출
<button type="button" onClick="setCheckBox('N')">체크해제하기</button> //체크박스 체크해제 펑션호출
</div>
</body>
3. 전체 체크박스 선택/해제 입니다.
<body>
<div class="tableCell">
<input id="allCheck" type="checkbox" checked/>전체수신<br>
<input name="emailCheck" id="emailCheck" type="checkbox" checked />이메일<br>
<input name="smsCheck" id="smsCheck" type="checkbox" checked />SMS<br>
</div>
<body>
<script type="text/javascript">
$(document).ready(function() {
$("#allCheck").click(function(){
//만약 전체 선택 체크박스가 체크된상태일경우
if($("#allCheck").prop("checked")) {
$("input[type=checkbox]").prop("checked",true);
//input type이 체크박스인것은 모두 체크함
} else {
$("input[type=checkbox]").prop("checked",false);
//input type이 체크박스인것은 모두 체크 해제함
}
});
});
</script>
'웹 > JQuery' 카테고리의 다른 글
| [jQuery] 제이쿼리 each(), foreach, for반복문 예제 (0) | 2020.05.03 |
|---|---|
| [jQuery]제이쿼리 fadeIn, fadeOut 이펙트 효과 사용하기 (0) | 2020.05.02 |
| [jQuery] 제이쿼리 attr(), prop() 비교 및 차이점을 알아보자 (0) | 2020.05.01 |
| [jQuery] 제이쿼리 show, hide div 보여주기/숨기기 (0) | 2020.04.25 |
| [jQuery] 제이쿼리 포커스아웃/포커스인 이벤트 알아보기 (0) | 2020.04.25 |