checkbox relation 만들기 (dataset object concept)
<!doctype html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B"
crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em"
crossorigin="anonymous"></script>
<title>relation checkbox</title>
</head>
<body>
<h3>Relation Checkbox(dataset object concept)</h3>
<form>
<div class="row">
<!-- 주중/주말 체크 -->
<div class="col-3 offset-1">
<div class="form-check">
<input class="form-check-input gender" type="checkbox" id="week-days" name="week-days" value="week-days">
<label class="form-check-label" for="week-days"></label>
week days
</div>
<div class="form-check">
<input class="form-check-input gender" type="checkbox" id="weekend" name="weekend" value="weekend">
<label class="form-check-label" for="weekend"></label>
weekend
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="all" name="all">
<label class="form-check-label"></label>
all check
</div>
</div>
<!-- 요일 체크 -->
<div class="col-3 day">
<div class="form-check week-days">
<input class="form-check-input" type="checkbox" id="monday" name="monday" value="monday" disabled>
<label class="form-check-label" for="monday"></label>
Monday
</div>
<div class="form-check week-days">
<input class="form-check-input" type="checkbox" id="tuesday" name="tuesday" value="tuesday" disabled>
<label class="form-check-label" for="tuesday"></label>
Tuesday
</div>
<div class="form-check week-days">
<input class="form-check-input" type="checkbox" id="wednesday" name="wednesday" value="wednesday" disabled>
<label class="form-check-label" for="wednesday"></label>
Wednesday
</div>
<div class="form-check week-days">
<input class="form-check-input" type="checkbox" id="thursday" name="thursday" value="thursday" disabled>
<label class="form-check-label" for="thursday"></label>
Thursday
</div>
<div class="form-check week-days">
<input class="form-check-input" type="checkbox" id="friday" name="friday" value="friday" disabled>
<label class="form-check-label" for="friday"></label>
Friday
</div>
<div class="form-check weekend">
<input class="form-check-input" type="checkbox" id="saturday" name="saturday" value="saturday" disabled>
<label class="form-check-label" for="saturday"></label>
Saturday
</div>
<div class="form-check weekend">
<input class="form-check-input" type="checkbox" id="sunday" name="sunday" value="sunday" disabled>
<label class="form-check-label" for="sunday"></label>
Sunday
</div>
</div>
<!-- 음식 체크 -->
<div class="col-3 food">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="hamburger" name="hamburger" value="hamburger" disabled>
<label class="form-check-label" for="hamburger"></label>
Hamburger
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="pizza" name="pizza" value="pizza" disabled>
<label class="form-check-label" for="pizza"></label>
pizza
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="pasta" name="pasta" value="pasta" disabled>
<label class="form-check-label" for="pasta"></label>
pasta
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="steak" name="steak" value="steak" disabled>
<label class="form-check-label" for="steak"></label>
steak
</div>
</div>
</div>
</form>
</body>
<script>
$(document).ready(function() {
// 전체선택
$('input[name=all]').on('change', function() {
var checked = $(this).is(':checked');
var items = $('.row input[type="checkbox"]').not('input[name=all]');
items.prop('checked', checked);
items.prop('disabled', !checked);
if(!checked) {
$('#week-days').prop('disabled', checked);
$('#weekend').prop('disabled', checked);
};
});
// 주중 or주말 선택
$('#week-days, #weekend').on('change', function() {
var checked = $(this).is(':checked');
var value = $(this).val();
var str = '.' + value + ' input[type="checkbox"]';
//var items = $('.'.concat(value));
var items = $(str);
uncheck();
items.prop('disabled', !checked);
if(!checked) {
items.prop('checked', checked);
};
food();
});
// 요일선택
$('.week-days, .weekend').on('change', function() {
food();
});
// 음식선택
$('.food input[type="checkbox"]').on('change', function() {
uncheck();
});
});//document.ready
// 전체선택버튼 해제
function uncheck() {
var all = $('.row input[type="checkbox"]').not('input[name=all]').length;
var items = $('.row input[type="checkbox"]:checked').not('input[name=all]').length;
$('input[name=all]').prop('checked', (items < all) ? false : true);
};
// 음식선택
function food() {
var cnt = $('.day input[type="checkbox"]:checked').length;
var items = $('.food input[type="checkbox"]');
items.prop('disabled', (cnt > 0) ? false : true);
if(cnt <= 0) {
items.prop('checked', false);
}
uncheck();
};
</script>
</html>
728x90
반응형
'Front-End > jQuery' 카테고리의 다른 글
| [jQuery] select option 설정 (0) | 2019.05.27 |
|---|---|
| [jQuery] jQuery Plugins 참고 사이트 (0) | 2019.05.23 |
| [jQuery] onchange() : 요소의 값이 변경될 때 발생 (0) | 2018.09.09 |
| [jQuery] .is() : 선택한 요소 중 하나가 selectorElement와 일치하는지 확인 (0) | 2018.09.09 |
| [jQuery] .not() : 특정 Element를 제외한 나머지 Element 선택하기 (0) | 2018.09.09 |
댓글