jQuery的/ HTML检查单选按钮上的div单击，并允许每个名称组中的1个div突出显示？

我有一个由单选按钮组成的表单：

表单的第一部分包含两个具有相同名称的单选按钮，即select1，这意味着用户可以选择一个或另一个，但不能同时选择两者。

然后在表单的第二部分中，我还有另外两个单选按钮，其名称分别为select2。

我将单选按钮css设置为不显示任何内容，并且将单选按钮包裹在一个跨度中以对其进行样式设置。

该表格如下所示：

HTML：

第1节

<div class="select_box_outer">
<span class="select_box">
<input type="radio" id="select" name="select1" value="same">
<div class="checkbox_tick"></div>
<div class="checkbox_tick2"></div>
</span>
</div>


<div class="select_box_outer">
<span class="select_box">
<input type="radio" id="select" name="select1" value="same">
<div class="checkbox_tick"></div>
<div class="checkbox_tick2"></div>
</span>
</div>

第2节

<div class="select_box_outer">
<span class="select_box">
<input type="radio" id="select" name="select2" value="same">
<div class="checkbox_tick"></div>
<div class="checkbox_tick2"></div>
</span>
</div>


<div class="select_box_outer">
<span class="select_box">
<input type="radio" id="select" name="select2" value="same">
<div class="checkbox_tick"></div>
<div class="checkbox_tick2"></div>
</span>
</div>

这些部分中的选项为“是”或“否”

我正在使用jquery，以便当用户单击我的父DIV“ select_box_outer”时，它会检查子单选按钮，并向我的div“ select_box_outer”添加一个类“ select_box_outer2”，这实际上会更改div的背景颜色以及几次边境变更等

此处的基本结果是，当用户单击div时，“ select_box_outer”从灰色变为橙色，并使用jquery检查该div中的单选按钮，以表明用户单击div“ select_box_outer”时，选中子单选按钮。

因此，我的用户实际上可以通过单击父div'select_box_outer'来检查单选按钮，而jquery只需检查该div中的单选按钮。

因此，现在，如果用户通过单击另一个“ select_box_outer” div选择了同一个名称组中的另一个单选按钮，则第一个div“ select_box_outer”上的单选按钮将变为未选中状态，并且div“ select_box_outer”的背景将恢复为灰色/不是橙色。在用户单击另一个“ select_box_outer” div中的单选按钮的同时，单击。

不仅如此，在我的每个div“ select_box_outer”中都有一个勾号。如果未选中该div的单选按钮，则勾号显示为灰色。

我的带有刻度的div称为“ checkbox_tick”

但是，当一个单选按钮被选中它是假设我的“checkbox_tick”的显示设置为none和显示我的绿色对勾“checkbox_tick2”

首先，当用户在该div中选中一个单选按钮时，我很难获得“ checkbox_tick2”的显示。

另外，如果我单击单选按钮的下一个名称组，则“ select_box_outer”类中的一个div在任何时候都将变为橙色，但是对于每个名称组，它应该允许一个“ select_box_outer” div为橙色？

JQUERY：

<script>
jQuery(function(){
    jQuery(".select_box_outer").click(function(){          

        $('input[type=radio]', this).prop("checked",true);

        $('.select_box_outer').removeClass("select_box_outer2");
        $('.checkbox_tick').css('display', 'none');
        $('.checkbox_tick2').css('display', 'block');

        $(this).addClass( "select_box_outer2" );
        $(this).siblings('div.checkbox_tick').css('display', 'block');
        $(this).siblings('div.checkbox_tick2').css('display', 'none');

    });
});
</script>