본문 바로가기

IT/JQUERY

체크박스 사용시에 많이 쓰이는 소스정리

1. checked 여부 확인

1
2
$("input:checkbox[id='ID']").is(":checked") == true false  /* by ID */
  $("input:checkbox[name='NAME']").is(":checked") == true false /* by NAME */

2. checked/unchecked 처리

1
2
$("input:checkbox[id='ID']").attr("checked"true); /* by ID */
$("input:checkbox[name='NAME']").attr("checked"false); /* by NAME */

3. 특정 라디오버튼 선택 / 모든 라디오버튼 선택해제

1
2
$("input:radio[name='NAME']:radio[value='VALUE']").attr("checked",true);
$("input:radio[name='NAME']").removeAttr("checked");



전체선택 체크박스를 선택하면 그 아래의 모든 체크박스를 선택해주는 것을 만들어보자.


1
2
3
4
5
<label><input type='checkbox' id='check_all' class='input_check' /> <b>전체선택</b></label>
<ul class='select_subject'>
<label><input type='checkbox' class='input_check' name='class[1]' value='1' /> <b>1</b></label>
<label><input type='checkbox' class='input_check' name='class[2]' value='2' /> <b>2</b></label>
</ul>


     


이런식으로 html이 있고, javascript 부분은 


1
2
3
4
5
6
7
$(function(){
    $("#check_all").click(function(){
        var chk = $(this).is(":checked");//.attr('checked');
        if(chk) $(".select_subject input").attr('checked'true);
        else  $(".select_subject input").attr('checked'false);
    });
});


같이 해주면 된다.

'IT > JQUERY' 카테고리의 다른 글

Jquery API 효과 정리  (0) 2015.06.24
select box사용시 까먹는 소스  (0) 2015.04.14
jquery swipe 예제  (0) 2014.12.20
jquery로 div 접었다 폈다 기능 초간단 팁도 아닙니다. ^^  (0) 2014.10.31
jquery hover 사용법  (0) 2014.10.20