input - checkbox

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>");
    }
});

https://www.devkuma.com/

---

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