ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 체크박스 선택여부, checked처리 라디오버튼 선택과 해제
    개발 & 계발/jQuery 2018. 12. 4. 21:02
    반응형

    출처 : http://hobbiez.tistory.com/321


    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>


    5) 전체선택 체크박스를 선택하면 그 아래의 모든 체크박스를 선택 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);

        });

    });



    출처: http://ooz.co.kr/4 [이러쿵저러쿵]


    1. 선택된 Radio 버튼의 값(value) 가져오기

        var st = $(":input:radio[name=search_type]:checked").val();

    2. Radio 버튼 값 설정(선택)하기

        $('input:radio[name=search_type]:input[value=' + st + ']').attr("checked", true);

        ※ st에는 선택상태가 되길 원하는 radio 버튼(search_type)의 value 값을 입력 (all, name, id 중 하나)

    -------------------------------------------------------------------------------------------------------------------

    <div class="list_search_form">
        <label><input type="radio" name="search_type" value="all" checked />전체검색</label>
        <label><input type="radio" name="search_type" value="name" />이름</label>
        <label><input type="radio" name="search_type" value="id" />아이디</label>
    </div>

    -------------------------------------------------------------------------------------------------------------------


Designed by Tistory.