js控制复选框和父容器样式

js控制复选框和父容器样式

效果

点击复选框和父容器，都会出现边框选中效果。

实现

因为点击复选框，冒泡会触发父容器事件，且复选框会自动切换checked，所以需判断是由谁触发的。

<script type="text/javascript">
			$(function() {
				//身份选择
				var ck1 = $('#ck1')
				var ck2 = $('#ck2')
				var ck3 = $('#ck3')
				var ib1 = $('#ib1')
				var ib2 = $('#ib2')
				var ib3 = $('#ib3')

				ib1.click(function() {
					//console.log('ccc', ck1[0].checked)
					if (ib1.hasClass("blueborder")) {
						ib1.removeClass('blueborder');
					} else {
						ib1.addClass('blueborder');
					}
					e = window.event || e;

					var obj = e.srcElement || e.target;

					if ($(obj).is("#ck1")) {
						//子元素上要做的事件

					} else {
						//父元素上要做的事件
						ck1.prop('checked', !ck1[0].checked)

					}
					/* if(ck1[0].checked){
						ib1.addClass('blueborder');
						ck1.prop('checked', true)
					}else{
						ib1.removeClass('blueborder');
						ck1.prop('checked', false)
					} */
				})
				ib2.click(function() {
					if (ib2.hasClass("blueborder")) {
						ib2.removeClass('blueborder');
					} else {
						ib2.addClass('blueborder');
					}
					e = window.event || e;

					var obj = e.srcElement || e.target;

					if ($(obj).is("#ck2")) {} else {
						ck2.prop('checked', !ck2[0].checked)

					}

				})
				ib3.click(function() {
					if (ck3[0].checked) {
						ib3.addClass('blueborder');
					} else {
						ib3.removeClass('blueborder');
					}
					e = window.event || e;

					var obj = e.srcElement || e.target;

					if ($(obj).is("#ck3")) {} else {
						ck3.prop('checked', !ck3[0].checked)

					}
					/* ib3.addClass('blueborder');
					ib1.removeClass('blueborder');
					ib2.removeClass('blueborder');
					ck1.prop('checked', false)
					ck2.prop('checked', false)
					ck3.prop('checked', true) */
				})
});
		</script>

<div class="f_header">
								选择入驻身份
							</div>
							<div class="imggroup">
								<div class="imgbox" id="ib1">
									<div class="checkbox">
										<label>
											<input type="checkbox" value="0" id="ck1"></label>
									</div>
									<div class="sfimg sf1">
										<!-- <img src="../../../static/img/login1/role1.png" class="sf" /> -->
									</div>
									<div class="sftext">
										设备厂商
									</div>
								</div>
								<div class="imgbox" id="ib2">
									<div class="checkbox">
										<label>
											<input type="checkbox" value="1" id="ck2"></label>
									</div>
									<div class="sfimg sf2">
										<!-- <img src="../../../static/img/login1/role1.png" class="sf" /> -->
									</div>
									<div class="sftext">
										应用服务商
									</div>
								</div>
								<div class="imgbox" id="ib3">
									<div class="checkbox">
										<label>
											<input type="checkbox" value="2" id="ck3"></label>
									</div>
									<div class="sfimg sf3">
										<!-- <img src="../../../static/img/login1/role1.png" class="sf" /> -->
									</div>
									<div class="sftext">
										设备厂商+应用服务商
									</div>
								</div>
							</div>