Front-end/JavaScript, jQuery
[jQuery] Checkbox 제어, 사용법
도미노&
2018. 10. 23. 14:20
1. 체크여부 확인
- id가 동일한 체크박스에 대하여 선택되어 있는지 확인 : true / false 반환
$("#chkBox").is(":checked") ;
$("input:checkbox[id='chkBox']").is(":checked") ;
* 1.6이상일때 권장 사용법
$("#chkBox").prop("checked") ;
2. 체크박스 갯수 가져오기
- 선택된 체크박스 갯수 구하기
$("#chkBox:checked").length ;
- 전체 체크박스 갯수 구하기
$("#chkBox").length ;
3. 체크박스 전체 선택하기 / 해제하기
- 전체 선택하기
$("#chkBox").prop('checked', true) ;
$("#chkBox").attr('checked', true) ;
- 전체 해제하기
$("#chkBox").prop('checked', false) ;
$("#chkBox").attr('checked', false) ;
4. 체크된 체크박스 value 가져오기
$('#chkBox:checked').each(function() {
alert($(this).val());
});
5. 체크박스 클릭시 이벤트 주기
function msgAlert(){
alert('1');
}
$("#chkBox" ).on( "click", msgAlert());
- id가 동일한 체크박스에 대하여 선택되어 있는지 확인 : true / false 반환
$("#chkBox").is(":checked") ;
$("input:checkbox[id='chkBox']").is(":checked") ;
* 1.6이상일때 권장 사용법
$("#chkBox").prop("checked") ;
2. 체크박스 갯수 가져오기
- 선택된 체크박스 갯수 구하기
$("#chkBox:checked").length ;
- 전체 체크박스 갯수 구하기
$("#chkBox").length ;
3. 체크박스 전체 선택하기 / 해제하기
- 전체 선택하기
$("#chkBox").prop('checked', true) ;
$("#chkBox").attr('checked', true) ;
- 전체 해제하기
$("#chkBox").prop('checked', false) ;
$("#chkBox").attr('checked', false) ;
4. 체크된 체크박스 value 가져오기
$('#chkBox:checked').each(function() {
alert($(this).val());
});
5. 체크박스 클릭시 이벤트 주기
function msgAlert(){
alert('1');
}
$("#chkBox" ).on( "click", msgAlert());
출처: http://fruitdev.tistory.com/143?category=568934 [과일가게 개발자]