html复选框只显示了一个,jquery / html复选框仅显示父/目标div的div，如果选中了另一个复选框，则取消选中复选框？...

我正在使用jquery来设置表单中复选框的样式。复选框的布局如下：

-------- ---------

| | | |

| | | |

|_ _ _ _ | |_ _ _ _|

因此它们显示为大盒子，当用户检查它们时会改变颜色(橙色)。但是，此时用户可以选择多个复选框，并且两个框都将变为(橙色)。如果用户选择了多个复选框，如何取消选中该组复选框中的框？

此外，如果未选中复选框，则会显示my。但是当用户选中复选框时，我会显示。

问题是如果用户选中左侧复选框'checkbox_tick2'会在两个复选框中显示，反之亦然但我只希望它显示已检查的目标div / parent div？

有人可以告诉我如何实现这一目标吗？感谢

HTML：

Yes

No

jquery的：

$(window).load(function(){

$(".select_box_outer").click(function () {

$(this).toggleClass("changeBackground");

});

});

$(".select_box_outer").on("click",function(event) {

var target = $(event.target);

if (target.is('input:checkbox')) return;

var checkbox = $(this).find("input[type='checkbox']");

if( !checkbox.prop("checked") ){

checkbox.prop("checked",true);

$(".checkbox_tick2").css("display", "none");

$(".checkbox_tick").css("display", "block");

} else {

checkbox.prop("checked",false);

$(".checkbox_tick2").css("display", "block");

$(".checkbox_tick").css("display", "none");

}

});