[jQuery] radio / checkbox script로 제어하기 (feat. prop, is, checked)

- radio, checkbox script제어하기 -

---

input type 의 radio 와 checkbox는 참 많이 쓰이는 것들인데

스크립트로 제어하다보니까 자꾸 까먹어

정리해두고자 한다.

 

코드를 중심으로 살펴보자.

---

▷ checkbox 제어

// 전체 체크 박스 가져오기 (by. name)
$("input:checkbox[name=mineCheck]")

// 전체 개수 (by. name)
$("input:checkbox[name=mineCheck]").length;

//선택된 개수 (by. name)
$("input:checkbox[name=mineCheck] : checked").length;

// 전체 체크 및 해제 (by. name)
$("input:checkbox[name=mineCheck]").prop("checked",true);
$("input:checkbox[name=mineCheck]").prop("checked",false);

//체크여부 확인 (by.name)
$("input:checkbox[name=mineCheck]").is(":checked"); //true or false
$("input:checkbox[name=mineCheck]").prop("checked"); //true or false
$("input:checkbox[name=mineCheck]").not("checked"); //true or false

---

▷ radio 제어

// 전체 radio 가져오기 (by. name)
$("input:radio[name=mineRadio]")

// 전체 개수 (by. name)
$("input:radio[name=mineRadio]").length;

//선택된 개수 (by. name)
$("input:radio[name=mineRadio] : checked").length;

// 전체 체크 및 해제 (by. name)
$("input:radio[name=mineRadio]").prop("checked",true);
$("input:radio[name=mineRadio]").prop("checked",false);

// 체크여부 확인 (by. name)
$("input:radio[name=mineRadio]").is(":checked"); //true or false (체크되어있나)
$("input:radio[name=mineRadio]").prop("checked"); //true or false (체크되어있나)
$("input:radio[name=mineRadio]").not("checked"); //true or false (체크가 안되어있나)

---

 

보면 알겠지만 checkbox와 radio의 제어방식은 어느정도 동일하다 보면 된다.

위 예제는 tag name을 기준으로 제어를 했는데

 

필요에 따라 다른 속성으로도 충분히 제어가 가능하다.