JQuery : 체크박스 클릭시 특정 블럭 감추가 보이기

 

 

📕 원하는 로직

 네트워크 input 체크 박스를 눌렀을때 id 가 BLOCK 인 div 블럭을 보여주고 체크박스를 해제하면 다시 감추고 싶다.

 

[ HTML]

<div class="input-group">
     <input type="checkbox" id="netwrok" name="check_network">
     <label class="biz-title">네트워크</label>
</div>
   <div id="BLOCK" style="display: none;">
   	<p class="biz-title">배고푸당</p>
   </div>

 

1. input 체크박스를 만든다. id와 name 으로 jQuery 작동할것 임으로 작성해준다.

2. 감추고 보여줄 div 를 만든다. = BLOCK

 

[JS]

    $("#netwrok").click(function() {
        console.log($("input[name=check_network]").is(":checked"));
        if($("input[name=check_network]").is(":checked")) {
            $("#BLOCK").show();
        } else {
            $("#BLOCK").hide();
        }
    })

 

1. #network 에 클릭을 했을때 함수를 작성한다.

2. $("input[name=check_network]").is(":checked")); = 인풋의 name 이 check_network 가 체크일때

3. ("#BLOCK").show(); 해당 id 값을 가진 블록을 show(); 한다. 즉, 평소엔 display = none 이 되어 있지만 체크를 하면 보여진다.

4. 만약 checked 가 false 라면 hide 로 값이 보여지지 않는다.