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")