为什么点击div能选中checkbox，点击div不能选中radio

[qq_15591383]

之前从网上看到一篇文章，能实现点击checkbox所在的div，选中checkbox，也能单独去点击checkbox，进行选中，代码如下

<script>
//注册checkbox的click事件
$(document).on('click', ':checkbox', function (e) {
//停止事件冒泡,当点击的是checkbox时,就不执行父div的click
e.stopPropagation();
//checkbox选中,div变色,否则不变色
$(this).prop('checked') ?
oCk.parent().css("background-color", "blue")
: oCk.parent().css("background-color", "#ff00ff");
});
//注册div的click事件,点击div时动态执行checkbox的click事件
$(document).on('click', 'div.ziyuankuai', function () {
$(this).find(':checkbox').click();
})
</script>

<div class="ziyuankuai w3-padding w3-round-large w3-display-container" id="c1">
<div class="w3-container">
<div class="bianlitieinfo">
资源名称
</div>
<div class="w3-display-middle w3-container">
<i class="fa fa-video-camera" style="font-size:18px"></i>
</div>
<div class="w3-display-bottomleft w3-container">
资源类型
</div>
</div>
<div class="w3-display-bottomright w3-container">
<input type="checkbox" name="spgid" value="${spg.id }">
</div>
</div>
<div class="ziyuankuai w3-padding w3-round-large w3-display-container" id="c1">
<div class="w3-container">
<div class="bianlitieinfo">
资源名称
</div>
<div class="w3-display-middle w3-container">
<i class="fa fa-music" style="font-size:18px"></i>
</div>
<div class="w3-display-bottomleft w3-container">
资源类型
</div>
</div>
<div class="w3-display-bottomright w3-container">
<input type="checkbox" name="spgid" value="${spg.id }">
</div>
</div>

这样就可以实现点击DIV选中DIV中的checkbox，我根据这个代码，想实现点击div选中div中的radio，radio也可以单独点击选中，代码如下

<script>
//注册radio的click事件
$(document).on('click', ':radio', function (e) {
//停止事件冒泡,当点击的是radio时,就不执行父div的click
e.stopPropagation();
//radio选中,div变色,否则不变色
$(this).prop('checked') ?
oCk.parent().css("background-color", "blue")
: oCk.parent().css("background-color", "#ff00ff");
});
//注册div的click事件,点击div时动态执行radio的click事件
$(document).on('click', 'div.ziyuankuai', function () {
$(this).find(':radio').click();
})
</script>

<div class="ziyuankuai w3-padding w3-round-large w3-display-container" id="c1">
<div class="w3-container">
<div class="bianlitieinfo">
资源名称
</div>
<div class="w3-display-middle w3-container">
<i class="fa fa-video-camera" style="font-size:18px"></i>
</div>
<div class="w3-display-bottomleft w3-container">
资源类型
</div>
</div>
<div class="w3-display-bottomright w3-container">
<input type="radio" name="spgid" value="${spg.id }">
</div>
</div>
<div class="ziyuankuai w3-padding w3-round-large w3-display-container" id="c1">
<div class="w3-container">
<div class="bianlitieinfo">
资源名称
</div>
<div class="w3-display-middle w3-container">
<i class="fa fa-music" style="font-size:18px"></i>
</div>
<div class="w3-display-bottomleft w3-container">
资源类型
</div>
</div>
<div class="w3-display-bottomright w3-container">
<input type="radio" name="spgid" value="${spg.id }">
</div>
</div>

这个代码，就只能点击radio选中它，而不是点击div来选中radio，不知道问题在哪里？另外，点击checkbox那个代码，也不能实现点击DIV以后，div变色。

[qq_15591383]

君当如狼的方法有效，就是如果我想实现点击DIV，选中radio后，这个div背景颜色变成指定的颜色，该怎么办？你说的去掉的那段代码貌似就是起这个作用的啊。

[wcwtitxu]

        //注册radio的click事件
        $(document).on('click', ':radio',function (e) {
            //停止事件冒泡,当点击的是radio时,就不执行父div的click
            e.stopPropagation();
        }).on('click', function() {
			$(':radio').each(function(){ $(this).parent().css("background-color", this.checked?'blue':'#f0f') });
		});
        //注册div的click事件,点击div时动态执行radio的click事件
        $(document).on('click', 'div.ziyuankuai', function () {
            $(this).find(':radio').click();
        })

[wcwtitxu]

$(this).prop('checked') ?
               oCk.parent().css("background-color", "blue")
               : oCk.parent().css("background-color", "#ff00ff");

把这个删掉，事件处理过程出错了。

[Triumph]

太麻烦了，你不知道 label 标签是专门干这个事儿的么？

[qq_15591383]

君当如狼你好，你给的方法，会把页面上所有的radio的父级层的背景颜色变化，而我要的是所选radio所在的父级的父级那个层，也就是ziyuankuai这个背景变色，点击其他ziyuankuai层或者其他radio，刚才被选中的div背景恢复原来的颜色，新的被点击的div变色。 如果是checkbox，可以多选的话，就是每个被点击选中的checkbox所在的层背景变色，该层再次被点击，也就是不再被复选，这个checkbox所在的层背景恢复原来的颜色。

[wcwtitxu]

	$(document).on('change', 'input[type=checkbox],input[type=radio]', function (e) {
		$('input[type=checkbox],input[type=radio]').each(function() {
			$(this).closest('.ziyuankuai').css("background-color", this.checked?"blue":"#ff00ff");
		})
	});
	//注册div的click事件,点击div时动态执行checkbox的click事件
	$(document).on('click', 'div.ziyuankuai', function (event) {
		if (!/input/i.test(event.target)) {
			$(this).find('input').click();
		}
	})

[qq_15591383]

这个方法非常棒，有效，解决了我的问题，非常感谢君当如狼，结贴啦。