ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [JQuery] 체크박스 선택여부, checked처리 방법
    Front-End/JQuery 2020. 8. 25. 10:18

    1. checked 여부 확인

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

     

    2. checked/unchecked 처리

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

     

     

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

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

     

     

    4. 전체선택 체크박스를 선택하면 그 아래의 모든 체크박스를 선택 HTML

    <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>

    4-1. 전체선택 체크박스를 선택하면 그 아래의 모든 체크박스를 선택 jQuery

    $(function(){
      $("#check_all").click(function(){
        var chk = $(this).is(":checked");//.attr('checked');
        
        if(chk) $(".select_subject input").prop('checked', true);
        else $(".select_subject input").prop('checked', false);
      });
    });

     

    [출처] https://hermeslog.tistory.com/327

Designed by Tistory.