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

Question

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

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

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

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

表单如下所示：

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>

section2

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

这些部分中的选项是 'Yes' 或 'No'

我正在使用 jquery，这样当用户点击我的父 DIV 'select_box_outer' 时，这会检查子单选按钮并添加 class 'select_box_outer2' 到我的 div 'select_box_outer'，这基本上改变了 div 的背景颜色以及一些边框变化等

这里的基本结果是 div 'select_box_outer' 在用户单击时从灰色变为橙色，并且使用 [=95= 选中此 div 中的单选按钮] 表示当用户单击 div 'select_box_outer' 时，选中子单选按钮。

所以我的用户基本上可以通过单击父 div 'select_box_outer' 来检查单选按钮，而 jquery 只需检查 div 中的单选按钮。

现在，如果用户 select 通过单击另一个 'select_box_outer' div 来选择同名组中的另一个单选按钮，则该单选按钮在第一个 div 'select_box_outer' 和背景 div 'select_box_outer' returns 变回 grey/not 橙色。在检查另一个 'select_box_outer' div 中的单选按钮时，用户单击。

除此之外，在我的每个 div 中 'select_box_outer' 都有一个勾号。当 div 的单选按钮未选中时，勾号显示为灰色。

我的 div 打勾的叫做 'checkbox_tick'

但是当一个单选按钮被选中时，假设将我的 'checkbox_tick' 的显示设置为 none 并显示我的绿色勾号 'checkbox_tick2'

当用户选中 div 中的单选按钮时，我首先要显示 'checkbox_tick2' 时遇到了一些困难。

此外，如果我单击我的下一个名称组单选按钮，则只有 'select_box_outer' class 中的一个 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，-泰德

Answer 2

如果你想 select 多个元素在一起，你必须使用 classes 并且没有 id。不允许有两个具有相同 id 的元素。将 id="select" 更改为 class="select" 并相应地调整代码。

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

jquery / html check radio button on div click and allow 1 div from each name group to be highlighted?

jquery

html

css

radio-button