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

Question

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

 --------        ---------
|        |       |       |
|        |       |       |
|_ _ _ _ |       |_ _ _ _|

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

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

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

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

HTML：

<div class="select_box_outer">
    <div class="select_text">Yes</div>
    <div class="inner_draw">
    <span class="select_box">
    <input type="checkbox" name="option" id="select_box1" value="same">
    <div class="checkbox_tick"></div>
    <div class="checkbox_tick2"></div>
    </span>
    </div></div>


    <div class="select_box_outer">
    <div class="select_text">No</div>
    <div class="inner_draw">
    <span class="select_box">
    <input type="checkbox" name="option" id="select_box1" value="same">
    <div class="checkbox_tick"></div>
    <div class="checkbox_tick2"></div>
    </span>
    </div></div>

jquery的：

<script>
$(window).load(function(){
$(".select_box_outer").click(function () {
$(this).toggleClass("changeBackground");
});
});  
</script>
<script>
$(".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");
    }
});
</script>