티스토리 뷰
728x90
javascript 코드
// jquery code
$("#all_item_check").change(function(){
if($("input[id=all_item_check]:checkbox").is(":checked") == false){
$("input[name=days]:checkbox").prop("checked", false);
}else{
$("input[name=days]:checkbox").prop("checked", true);
}
});
$("input:checkbox[name='days']").click(function(){
if($(this).is(":checked") == false){
$("input:checkbox[id='all_item_check']").prop("checked", false);
};
});
Html 코드
<div class="daySelect">
<div class="">전체</div>
<div class="">월</div>
<div class="">화</div>
<div class="">수</div>
<div class="">목</div>
<div class="">금</div>
<div class="">토</div>
<div class="">일</div>
<div class=""><input id="all_item_check" type="checkbox" value="all"></div>
<div class=""><input type="checkbox" name="days" value="mon"></div>
<div class=""><input type="checkbox" name="days" value="tue"></div>
<div class=""><input type="checkbox" name="days" value="wed"></div>
<div class=""><input type="checkbox" name="days" value="thu"></div>
<div class=""><input type="checkbox" name="days" value="fri"></div>
<div class=""><input type="checkbox" name="days" value="sat"></div>
<div class=""><input type="checkbox" name="days" value="sun"></div>
</div>
전체 버튼을 클릭하면 모든 버튼이 클릭되고, 월~일 중 하나가 false가 되면 전체 버튼이 false 상태로 변하는 코드이다!
.daySelect {
text-align: center;
display: grid;
grid-template-columns: repeat(8, 1fr);
}
daySelect class에 display: grid 속성을 줘서 손쉽게 테이블 형태를 만들었다.
728x90
'javascript' 카테고리의 다른 글
jQuery - 동적으로 생성된 element에 이벤트 걸기 (0) | 2020.08.01 |
---|---|
jQuery AJAX (0) | 2020.07.31 |
javascript(1) (0) | 2020.07.02 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 상태관리
- level1
- css
- dfs
- 이것이코딩테스트다
- 파이썬
- Hook
- TypeScript
- 프로그래머스
- level3
- 이진탐색
- 이코테
- reactjs
- 면접을 위한 CS 전공지식 노트
- nomadcoder
- springboot
- programmers
- CS
- CORS
- axios
- 노마드코더
- html
- React.FC
- 소프티어
- 이것이 취업을 위한 코딩테스트다
- redux
- JavaScript
- React
- 자바스크립트
- 기초
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
글 보관함