작업하면서 기억안날 때 마다 일일히 찾아 보기 귀찮아 작성합니다.
사용 Method
.is() - 선택 요소를 확인 후 Boolean(true, false) 반환
.attr(), .prop() - 태그의 속성 변경은 같지만 .attr()은 해당 태그의 속성값을 반환하고 .prop()은 true, false를 반환
.click() - 선택 요소를 클릭 할 경우 반응
.change() - 선택 요소의 값이 변하였을 때 반응
.each() - 복수의 요소 수 만큼 반복 함수 실행
1. 전체체크
//전체체크 클릭 시
$("#chkAll").click(function(){
if($(this).is(":checked")){ //대상이 체크 되어 있을 때
//모든 체크박스 체크
$(".chkSub").attr("checked", true);
}else{ //대상이 체크 해제 되어 있을 때
//모든 체크박스 체크해제
$(".chkSub").attr("checked", false);
}
});
//전체 체크의 값이 변화했을 때
$("#chkAll").change(function(){
if($(this).is(":checked")){ //대상이 체크 되어 있을 때
//같은 네임을 가진 체크박스 체크
$("input:checkbox[name='chk']").prop("checked", true);
}else{ //대상이 체크 해제 되어 있을 때
//같은 네임을 가진 체크박스 체크해제
$("input:checkbox[name='chk']").prop("checked", false);
}
});
2. 체크된 체크 박스 값 확인
//chkAll이란 ID를 가지고 있는 체크박스의 값 출력
console.log($("input:checkbox[id='chkAll']).val());
3. 전체 체크된 체크 박스 각각의 값 확인
//클래스명 chkSub를 가진 체크된 체크 박스 값 출력
$(".chkSub:checked").each(function(idx){
console.log(idx + "번째 = " + $(this).val());
});
4. 체크박스 체크 여부 확인
//is - true, false 반환
if($("#chkBox").is(":checked")){
console.log("is 체크 됨");
}else{
console.log("is 체크 안됨");
}
//prop - true, false 반환
if($("input:checkbox[name='chkBox']").prop("checked")){
console.log("prop 체크 됨");
}else{
console.log("prop 체크 안됨");
}
//attr - 'checked' 반환 문자열 비교 (추천하지 않음)
if($("input:checkbox[id='chkBox']").attr("checked") == "checked"){
console.log("attr 체크 됨");
}else{
console.log("attr 체크 안됨");
}
5. 체크된 체크박스의 갯수, 전체 체크박스의 갯수 확인
//chkSub라는 클래스를 가진 체크박스의 갯수
console.log($(".chkSub").length);
//체크된 체크박스의 갯수
console.log($(".chkSub:checked").length);
댓글