1. input 만들기
전체 선택, 해제
<input type=checkbox id="cboxAll" name="cboxAll" onclick="cAll()">
while문 안에 있음
<input type=checkbox id="cbox" name="cbox">
2. cAll() 함수 실행
<script>
function cAll() {
if($('#cboxAll').is(':checked')) { // 전체선택 체크 하면
$("input[name=cbox]").prop("checked",true); // 각 체크박스 체크되게
} else { // 체크 해제하면
$("input[name=cbox]").prop("checked",false); // 각 체크박스 체크 해제
}
}
</script>
==> 전체선택이 체크된 상태에서 체크박스가 1개라도 체크가 해제될 경우 전체선택 해제되게 할 것
.attr()
ㄴ> HTML의 속성을 취급
ㄴ> html 에서 정의한대로 값(=요소의 현재 상태의 원래 값) 제공
ㄴ> 모든 값이 String 으로 넘어옴
<ex>
<input value="hello" type="text"/>
ㄴ>
.attr('value') - 'hello' 반환
.prop()
ㄴ> JavaScript 프로파티을 취급
ㄴ> javascript / jquery를 통해 수정 된 요소의 값을 가져 올 때 좋음
ㄴ> boolean, date, function 등으로 넘어옴
<ex>
$('input').prop('value', 'i changed the value');
ㄴ> .prop('value') - 'i changed the value' 반환
.val()
ㄴ> value 값 반환할 때 이용
.on( eventType, function() )
ㄴ> 이번트 바인딩할 때 이용
ㄴ>
ㄴ>
<ex>
$("p").on("click", function(){
alert("문장이 클릭되었습니다.");
});
$("p").on({ // 여러이벤트 바운딩 가능
click: function() {
$("div").append("마우스가 문장을 클릭했습니다.<br>");
},
mouseenter: function() {
$("div").append("마우스가 커서가 문장 위로 들어왔습니다.<br>");
},
mouseleave: function() {
$("div").append("마우스가 커서가 문장을 빠져 나갔습니다.<br>");
}
});
3. 전체선택 후 cbox 몇개 체크 해제하면 cboxAll 취소되게 --> 배열 사용
방법1) 안먹힘!!!
$(document).on("click","input:checkbox[name=cbox]",function(e)) {
var cks = document.getElementsByName("cbox"); // "cbox"에 속성값으로 접근하겠다(변수명으로 하기엔 기니깐 cks 라는 변수에 담기!)
var cksChecked = 0; // 체크된 cbox 0임을 선언
for(var i=0; i<cks.length; i++) {
var cbox = cks[i]; //cbox가 여러개이므로 배열 사용
if(cbox.checked) { // cbox 체크되어있다면 증가처리
cksChecked ++;
}
}
if(cks.length == cksChecked) {// cbox총개수 == cbox의 선택된 개수
$("#cboxAll").prop("checked",true); // 전체선택되게
} else {
$("#cboxAll").prop("checked",false); // 선택해놓은 cbox만 선택되게(전체선택 해제)
}
};
방법2) https://dancepkt2.cafe24.com/bbs/board.php?bo_table=script&wr_id=98