checkbox 관련

    <h1>입력 양식 선택자2</h1>

    <h3>체크박스 선택자</h3>

    선호 영화 장르 : <br>

    <input type="checkbox" name="genre" id="sf">SF

    <input type="checkbox" name="genre" id="ani"> 애니메이션

    <input type="checkbox" name="genre" id="thriller">스릴러

    <br>

    <input type="checkbox" name="genre" id="romentic"> 로멘틱코메디

    <input type="checkbox" name="genre" id="action">액션

<script>

    //onchange: 값이 변경될 때를 감지하는 이벤트 리스너

    $('input:checkbox').change(checkGenre);

    function checkGenre(){

        console.log($(this).attr('id'));

        console.log($(this).prop('checked'));

        //attr()/prop()

        //attr()은 id, class와 같이 속성값이 문자열일 경우 사용하고,

        //prop()는 checked, disabled,required와 같이 속성값이

        //true/false 로 나뉘는 속성을 확인 할때 사용한다.

        if($(this).prop('checked')){

            $(this).css({

                width:'30px',

                height:'30px'

            });

        } else{

            $(this).css({

                width:'15px',

                height: '15px'

            })

        }

    }