Question

我有多个单选按钮共享相同的名称。其中一个在它旁边有一个隐藏的div。

当选择了正确的单选按钮时，我想显示/隐藏它旁边的div“如果有的话”

这是一个例子

电台1 电台2 电台3 电台4

Radio 2旁边有一个隐藏的div。我想在选择Radio 2时显示它。然后当选择Radio 4时，我想隐藏Radio 2 div

这就是我所做的

$(function(){

    function getGroupElement(value)
    {
        return '#group_' + value.replace(':', '_');
    }




  var previous;   

    $("input[type='radio']").click(function(e) {
        // Store the current value on focus and on change
        previous = $(this).val();

        console.log('Current:' + previous);

    }).change(function(e) {

        var previousGroupId = getGroupElement(previous);

        var newGroupName = $(this).data('show-group');

        //Hide the previous Group
        $(previousGroupId).hide();

        if ( ! newGroupName){
            return;
        }

        $(newGroupName).show();

    });

});

上面的代码无效，因为之前的代码设置为下一个选定的项目。

如何隐藏/显示正确的方框？

如果需要，这是我的HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <fieldset class="survey-control-fieldset">
        <div class="survey-control-title">
            Select a store
        </div>
        <div class="radio">
            <label for="item_529"><input checked id="item_529" name=
            "control_111" type="radio" value="112:529"> None</label>
        </div>
        <div class="radio">
            <label for="item_530"><input id="item_530" name="control_111" type=
            "radio" value="112:530"> Don't Know/No Answer</label>
        </div>
        <div class="radio">
            <label for="item_532"><input data-show-group="group_112_532" id=
            "item_532" name="control_111" type="radio" value="112:532">
            Other</label>
            <div id="group_112_532" style="display: none;">
                <div class="form-group">
                    <label for="control_113">Specify Other Store Name</label>
                    <input class="form-control" id="control_113" name=
                    "control_113" placeholder="" type="text" value="">
                </div>
            </div>
        </div>
        <div class="radio">
            <label for="item_531"><input id="item_531" name="control_111" type=
            "radio" value="112:531"> Refused</label>
        </div>
    </fieldset>
</body>
</html>

Answer 1

隐藏无线电旁边的所有DIV，然后显示所选无线电旁边的DIV。

$(":radio").next("div").hide();
$(this).next("div").show();

Answer 2

如果你给每个隐藏的div提供相同的类名，你可以在展示新的之前隐藏它们：

$('.hidden-divs').not(newGroupName).hide();
$(newGroupName).show();

如何在更改前获取所选单选按钮的值？

2 个答案: