본문 바로가기

WEB/내맘대로 코딩

전체 체크박스

급하게 필요해서 초간단하게 만든 전체 체크박스

See the Pen WNQreOb by rainydaymusickr (@rainydaymusickr) on CodePen.

 

<div class="ui_checkbox">
		<div class="total">
			<input type="checkbox" id="checkall" class="ui_checkbox_all">
			<label for="checkall">전체동의</label>
		</div>
		<ul class="list">
			<li>
				<input type="checkbox" id="chk1" class="ui_checkbox">
				<label for="chk1">개인정보</label>
			</li>
			<li>
				<input type="checkbox" id="chk2" class="ui_checkbox">
				<label for="chk2">위치정보</label>
			</li>
			<li>
				<input type="checkbox" id="chk3" class="ui_checkbox">
				<label for="chk3">부가정보</label>
			</li>
		</ul>
	</div>
*{margin:0;padding:0;}
.total{padding:10px;border-bottom:1px solid #ddd;}
.total.on{background-color:lightgrey;}
.list{padding:10px;}
.list li{margin-bottom:10px;}
.list li.on{background-color:lime;}
var uiCheckbox = {
	done : function(){
		$('.ui_checkbox').each(function(){
			var allcheck = $(this).find('.ui_checkbox_all');
			var onecheck = $(this).find('.ui_checkbox');
			var onecheck_num = onecheck.length;
			var checked = 0;
			
			allcheck.on('change', function(){
				if( $(this).prop('checked') ){
					$(this).prop('checked',true).attr('checked','checked').closest('.total').addClass('on');
					onecheck.prop('checked',true).attr('checked','checked').closest('li').addClass('on');
					checked = onecheck_num;
				}else{
					$(this).prop('checked',false).removeAttr('checked').closest('.total').removeClass('on');
					onecheck.prop('checked',false).removeAttr('checked').closest('li').removeClass('on');
					checked = 0;
				}
			});
			
			onecheck.on('change', function(){
				if( $(this).prop('checked') ){
					checked++;
					if( checked > onecheck_num ){
						checked = onecheck_num;
						allcheck.prop('checked',true).attr('checked','checked').closest('.total').removeClass('on');
					}
					$(this).prop('checked',true).attr('checked','checked').closest('li').addClass('on');

				}else{
					checked--;
					if( checked < 0 ){
						checked = 0;
					}
					allcheck.prop('checked',false).removeAttr('checked').closest('.total').removeClass('on');
					$(this).prop('checked',false).removeAttr('checked').closest('li').removeClass('on');
				}
				//console.log(checked);

				if( checked === onecheck_num ){
					allcheck.prop('checked',true).attr('checked','checked').closest('.total').addClass('on');
				}else{
					allcheck.prop('checked',false).removeAttr('checked').closest('.total').removeClass('on');
				}
			});
		});
	}
};

$(document).ready(function(){
	uiCheckbox.done();
});

'WEB > 내맘대로 코딩' 카테고리의 다른 글

틀린그림찾기  (0) 2020.04.15
swiperjs - 앙케이트 설문지  (0) 2020.04.14
전체 체크박스  (0) 2019.08.21
튤팁 tooltip  (0) 2019.08.05
풍선말 (함수형 vs 프로토타입형 코드 비교)  (0) 2019.08.04
스와이퍼+스크롤탭  (0) 2018.08.11