[javaScript] html에서 check box 컨트롤 하기

<div>
    <input type="hidden" name="data_hidden" value="${data_hidden}">
    <input type="checkbox" id="data_check" value="Y" ${data_hidden == "Y" ? "checked=checked" : ""}></input>
    <!-- 컨트롤할 문구 -->
    <div class="check_green"><span style="font-weight: bold; color:green;">checked</span></div>
    <div class="check_red"><span style="font-weight: bold; color:red;">not checked</span></div>
<div>

해당 html 에서 check box 구문이 있는데

checked 되었을때 문구 날리는 부분을 연습중.

기본 default는 체크된 상태

<script>
   // 체크된 상태이므로 green 문구를 날림
    $('.check_green').show();
    $('.check_red').hide();
 
    $('#data_check').on("change", function (){
        var _self = this;
        var check_val = $("[name='data_hidden']").val();
        if(check_val == 'Y'){
            $('.check_green').hide();
            $('.check_red').show();
        }else{
            $('.check_green').show();
            $('.check_red').hide();
        }
        $("[name='data_hidden']").val(function(){
            return $(_self).is(":checked") ? "Y" : "N";
        });
    }); 
 
 
</script>

hidden 처리된 data 값에 따라 checked 상태를 날리며

change function에 따라서 문구를 나눠준다.

마지막 리턴값은 체크되거나 안되었을때 Y:N을 hidden 값에 넘겨줌.