본문 바로가기
JavaScript

jQuery로 체크박스(checkbox) 제어(control) 하기

by 농사짓는 개발자 누피짱 2015. 2. 6.

jQuery checkbox 컨트롤

 

1. checkbox checked 여부 :

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

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

 

=>  $('input[id="checkbox_id"]') + 옵션 형태로 작성 해도 문제는 없다

Ex) $('input[name="checkbox_name"]').is(":checked")

 

2. checkbox 전체 갯수 : $('input:checkbox[name="checkbox_name"]').length

3. checkbox 선택된 갯수 : $('input:checkbox[name="checkbox_name"]:checked').length

* 2,3번은 name 인 경우에만 가능

 

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

 $('input:checkbox[name="checkbox_name"]').each(function() {

      this.checked = true; //checked 처리

      if(this.checked){//checked 처리된 항목의 값

            alert(this.value)

      }

 });

 

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

 $('input:checkbox[name="checkbox_name"]').each(function() {

     if(this.value == "비교값"){ //값 비교

            this.checked = true; //checked 처리

      }

 });

 

* 동일한 name 으로 1개 or 여러개 있을 경우에는 같은 name 으로 된 모든 checkbox checked 처리된다.

 

6. checkbox value 값 가져오기 :  $('input:checkbox[id="checkbox_id"]').val(); //단일건

7. checkbox checked 처리 하기 : $('input:checkbox[id="checkbox_id"]').attr("checked", true); //단일건

8. checkbox checked 여부 간단 확인: $("#checkbox_id"]').is(":checked"); //단일건

 

=== Reference ===

* 만약 해당 id, name이 존재하지 않더라도 javascript 에러가 발생하지 않는다.

댓글3

  • 개발자 2016.08.02 10:33

    정말 깔끔하게 잘 정리되어있습니다!
    답글

  • Favicon of https://highwave.tistory.com BlogIcon 굳데이 2018.05.27 18:21 신고

    자바 스크립트 찾아 보다가.. 농사짓는 개발자라니..
    저도 개발자이고,, 농사까지는 아닌데 텃밭을 가꾸고 있습니다.
    너무 너무 나와 살고 싶어서 큰맘먹고 와이프와 같이 고민고민하다가 양평으로 이사왔습니다. ㅎㅎ
    농사관련 자료는 없나요.. ㅎㅎㅎ
    저랑 같은 직업에 비슷한 환경일것 같아서.... 댓글이 길어졌네요.
    항상 건승 기원합니다~

    답글

  • 지나가는 개발자 2020.12.03 10:31

    정말 정리 너무 깔끔해서 도움이 잘 되었습니다~

    감사합니다
    답글