🎈 HTML
<body> <label>전체선택<input type='checkbox' id='all_check'> </label> <hr /> <label><input type='checkbox' class='hobby' value="soccor">축구</label> <label><input type='checkbox' class='hobby' value="basketball">농구</label> <label><input type='checkbox' class='hobby' value="baseball">야구</label>
🎈 jquery
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $("#all_check").on('click', function(){ $(".hobby").prop('checked', true); //전체선택 체크 안되어 있으면 체크박스 모두 해제 if($("#all_check").is(':checked') == false){ $(".hobby").prop('checked', false); } }); </script> </body>
전체선택 체크박스를 클릭하면, 클래스가 hobby인 체크박스들의
checked 속성을 true로 설정한다.전체선택 체크박스의 체크여부가false라면, 클래스가 hobby인 체크박스들의checked 속성을 false로 설정한다.
웹 개발자 공부 중