使用 jQuery 引导分层单选按钮答案

【问题标题】：Bootstrap tiered radio buttons with jQuery使用 jQuery 引导分层单选按钮
【发布时间】：2017-02-05 00:58:18
【问题描述】：

我是 jQuery 的新手，目前正在学习它，所以如果我问的内容太荒谬，请原谅我。

我正在使用 Bootstrap 创建一个网络表单，它使用单选按钮并且是分层的，因此当您为第一个选项选择“是”时，它将显示下一组单选按钮，然后当您选择“是”时" 对于该选项，它将显示一个文本框。

这是我当前的 HTML。

<div class="from-group row">

                    <div class="col-sm-6 wireless_use">
                        <label for="wireless_use" name="wireless_use" class="col-xs-12 col-sm-6 col-form-label">Used any wireless bridge kit?</label>
                        <div class="col-xs-12 col-sm-6">
                            <label class="radio-inline">
                                <input type="radio" name="wireless_use1" id="wireless_use" value="1"> Yes
                            </label>

                            <label class="radio-inline">
                                <input type="radio" name="wireless_use0" id="wireless_use" value="0"> No
                            </label>
                        </div>
                    </div>

                    <div class="col-sm-6 hidden wireless_use_yes">
                        <label for="wireless_use_yes" name="wireless_use_yes" class="col-xs-12 col-sm-6 col-form-label">Did you have any problems?</label>
                        <div class="col-xs-12 col-sm-6">
                            <label class="radio-inline">
                                <input type="radio" name="wireless_use_yes1" id="wireless_use_yes" value="1"> Yes
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="wireless_use_yes0" id="wireless_use_yes" value="0"> No
                            </label>
                        </div>
                    </div>

                </div>

                <div class="form-group row hidden wireless_use_yes_problems">
                    <label for="wireless_use_yes_problems" class="col-sm-2 col-form-label">What problems did you have?</label>
                    <div class="col-sm-10">
                        <textarea class="form-control" rows="3" name="wireless_use_yes_problems" placeholder=""></textarea>
                    </div>
                </div>

这是我与此相关的 CSS：

.hidden {
    display: none;
}

这里是 JS：

$(document).ready(function () {

$('input[type="radio"]').click(function () {
    if ($(this).attr("name") == "wireless_use1") {
        $(".wireless_use_yes").show();
    }
    if ($(this).attr("name") == "wireless_use_yes1") {
        $(".wireless_use_yes").show();
        $(".wireless_use_yes_problems").show();

    }
});

$('input[type="radio"]').trigger('click');  // trigger the event

});

非常感谢有关此问题的任何帮助或建议！

【问题讨论】：

标签： javascript jquery twitter-bootstrap radio-button

【解决方案1】：

为了使用 jQuery 选择任何具有特定名称的输入，我们使用

[name="xyz"]

在你的情况下是必须的

$("input[name='wireless_use1']")

如果你想在改变时触发一个事件，它必须是这样的

$("input[name='wireless_use1']").change(function(){...});

我为您的问题创建了一个小提琴，希望这可以帮助您解决问题。

Fiddle Solution

-帮助:)

【讨论】：