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

Question

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

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

然后在我的表单的第二部分，我有另外 2 个单选按钮，名称不同，即 select2。

我将我的单选按钮 css 设置为不显示，并将我的单选按钮包裹在一个 span 中以便设置它们的样式。

表单如下所示:

HTML:

第一节

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

第二节

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

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

我正在使用 jquery，这样当用户单击我的父 DIV“select_box_outer”时，它会检查子单选按钮并将类“select_box_outer2”添加到我的 div“select_box_outer”，这实际上将 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' 的显示设置为无并显示我的绿色勾号 '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>

Answer 1

在这里查看这个 fiddle :Fiddle (为了显示目的，我添加了带有 fontawesome 的刻度线)

最大的改变就是改变

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

到

$(this).find('.checkbox_tick').css('display', 'block');
$(this).find('.checkbox_tick2').css('display', 'none');

哦，还有不要把 div 放在 span 中

更新后的答案:

Updated Fiddle

这是一种将脚本限制在每个部分的方法:

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

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

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

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

    });
});

这是使用 .parent 将操作范围限定在适当的部分。

这是遍历 dom 树的好东西: jQuery Docs: Tree Traversal

HTH，-泰德