用jQuery引导分层单选按钮

Question

我对jQuery相当陌生，目前正在学习它，所以如果我的问题如此荒谬，请原谅我。

我正在使用Bootstrap创建一个web表单，它使用单选按钮和分层，所以当你选择"是"为第一个选项，它将显示下一组单选按钮，然后当你选择"是"为该选项，它将显示一个文本框。

这是我当前的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

});对于这个问题，任何帮助或建议都是非常感谢的!

Answer 1

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

[name="xyz"]

在你的例子中必须是

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

如果你想在改变时触发一个事件，它必须像

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

我为你的问题创建了一个小提琴，希望它能帮助你解决你的问题。

小提琴的解决方案

- help:)