Rianshin

[jQuery] 체크박스 컨트롤.. 본문

Develop/Javascript

[jQuery] 체크박스 컨트롤..

RianShin 2020. 12. 21. 15:39
728x90
반응형
SMALL

1. checkbox checked 여부

//id인 경우
$('input:checkbox[id="checkbox_id"]').is(":checked") == true
console.log($('input:checkbox[id="checkbox_id"]').is(":checked")) // true or false

//name인 경우
$('input:checkbox[name="checkbox_name"]').is(":checked") ==  true
console.log($('input:checkbox[name="checkbox_name"]').is(":checked")) // true or false

2. checkbox 전체 갯수 

$('input:checkbox[name="checkbox_name"]').length

3. checkbox 선택된 갯수 

$('input:checkbox[name="checkbox_name"]:checked').length

 

4. checkbox 전체 순회 하며 처리(동일한 name으로 여래개인 경우 전체를 컨트롤 할 수 있다.)

//name="checkbox_name" or class명으로도 가능
$('input:checkbox[name="checkbox_name"]').each(function() {
      this.checked = true; //checked 처리
      if(this.checked){//checked 처리된 항목의 값
            alert(this.value); 
      }
 });

 

5. checkbox 전체 순회 하며 값을 값을 비교하여 checked 처리

// 동일한 name 으로 1개 or 여러개 있을 경우
// 같은 name 으로 된 모든 checkbox 가 checked 처리된다.
$('input:checkbox[name="checkbox_name"]').each(function() {
     if(this.value == "비교값"){ //값 비교
            this.checked = true; //checked 처리
      }
 });

6. checkbox value 값 가져오기

// single
$('input:checkbox[id="checkbox_id"]').val(); 

7. checkbox checked 처리 하기

 // single
 $('input:checkbox[id="checkbox_id"]').attr("checked", true); 

8. checkbox checked 여부 간단 확인

// single
$("#checkbox_id"]').is(":checked");

 

 

728x90
반응형
LIST
Comments