如何在下拉自定义列表单选按钮中添加两个以上的选项？答案

【问题标题】：How to add more than two options in a drop down custom list radio button?如何在下拉自定义列表单选按钮中添加两个以上的选项？
【发布时间】：2020-08-18 22:33:31
【问题描述】：

This is my code, its basically a form having two radio buttons, which when chosen display a different list of options in the drop down.

var theForm = document.getElementById('theForm');
var rad = theForm.radios;

for (var i = 0; i < rad.length; i++) {
    rad[i].addEventListener('change', function() {
            theForm.classList.toggle('one');
            theForm.classList.toggle('two');
        });
}

.conditional1, .conditional2 {
    display: none;
}

.one .conditional1 { display: block; }
.two .conditional2 { display: block; }

fieldset { margin: 1rem; }

<form id="theForm" class="one">
<fieldset id="outer">
    <legend>Choices</legend>
    <div class="radio-wrap">
        <label for="one">One</label>
        <input type="radio" id="one" name="radios" value="one" checked>
    </div>

    <fieldset class="conditional1">
            <legend>If One is set</legend>
            <div class="radio-wrap">
                <input type="radio" id="aye1" name="condition1" value="aye" checked>
                <label for="aye1">Aye</label>
            </div>
            <div class="radio-wrap">
                <input type="radio" id="nay1" name="condition1" value="nay">
                <label for="nay1">Nay</label>
            </div>
    </fieldset>

    <div class="radio-wrap">
        <label for="two">Two</label>
        <input type="radio" id="two" name="radios" value="two">
    </div>
    
    <fieldset class="conditional2">
        <legend>If Two is set</legend>
        <div class="radio-wrap">
            <input type="radio" id="aye2" name="condition2" value="aye" checked>
            <label for="aye2">Aye</label>
        </div>
        <div class="radio-wrap">
            <input type="radio" id="nay2" name="condition2" value="nay">
            <label for="nay2">Nay</label>
        </div>
    </fieldset>
</fieldset>
</form>

当您有两个选项时它运行良好，但是当您添加第三个单选按钮时它开始出现故障。

这是我尝试添加更多单选按钮的代码：

var theForm = document.getElementById('theForm');
var rad = theForm.radios;

for (var i = 0; i < rad.length; i++) {
    rad[i].addEventListener('change', function() {
            theForm.classList.toggle('one');
            theForm.classList.toggle('two');

        });
}

.conditional1, .conditional2, .conditional3, .conditional4 {
    display: none;
}

.one .conditional1 { display: block; }
.two .conditional2 { display: block; }
.three .conditional3 { display: block; }
.four .conditional4 { display: block; }

fieldset { margin: 1rem; }

<form id="theForm" class="one">
    <fieldset id="outer">

    <legend>Please Select File</legend>

    <div class="radio-wrap">
        <label for="one">GST</label>
        <input type="radio" id="one" name="radios" value="one">
    </div>

            <fieldset class="conditional1">
                    <legend>GST</legend>
                    <div class="radio-wrap">
                        <input type="radio" id="aye1" name="condition1" value="aye">
                        <label for="aye1">Aye1</label>
                    </div>
                    <div class="radio-wrap">
                        <input type="radio" id="nay1" name="condition1" value="nay">
                        <label for="nay1">Nay1</label>
                    </div>
            </fieldset>

    <div class="radio-wrap">
        <label for="two">Two</label>
        <input type="radio" id="two" name="radios" value="two">
    </div>

            <fieldset class="conditional2">
                <legend>If Two is set</legend>
                <div class="radio-wrap">
                    <input type="radio" id="aye2" name="condition2" value="aye">
                    <label for="aye2">Aye2</label>
                </div>
                <div class="radio-wrap">
                    <input type="radio" id="nay2" name="condition2" value="nay">
                    <label for="nay2">Nay2</label>
                </div>
            </fieldset>

    <div class="radio-wrap">
        <label for="three">Three</label>
        <input type="radio" id="three" name="radios" value="three">
    </div>

            <fieldset class="conditional3">
                <legend>If Three is set</legend>
                <div class="radio-wrap">
                    <input type="radio" id="aye3" name="condition3" value="aye">
                    <label for="aye3">Aye3</label>
                </div>
                <div class="radio-wrap">
                    <input type="radio" id="nay3" name="condition3" value="nay">
                    <label for="nay3">Nay3</label>
                </div>
            </fieldset>

    <div class="radio-wrap">
        <label for="four">Four</label>
        <input type="radio" id="three" name="radios" value="four">
    </div>

            <fieldset class="conditional4">
                <legend>If Four is set</legend>
                <div class="radio-wrap">
                    <input type="radio" id="aye4" name="condition4" value="aye4">
                    <label for="aye4">Aye4</label>
                </div>
                <div class="radio-wrap">
                    <input type="radio" id="nay4" name="condition4" value="nay4">
                    <label for="nay3">Nay3</label>
                </div>
            </fieldset>


</fieldset>
</form>

我是一个初学者，所以任何帮助表示赞赏。

【问题讨论】：

您应该使用您的代码创建一个 jsFiddle，以便人们更轻松地帮助您。 jsfiddle.net
@Amir 不需要jsFiddle，最好在问题中直接添加代码为sn-ps。 @leopardlazy 我已将您的代码转换为 sn-ps，以便人们可以在您的问题中运行它们以查看发生了什么。您可以使用问题编辑器工具栏中的[<>] 按钮添加代码 sn-ps。
非常感谢伙计，我是这个东西的新手。我会尽量遵守我了解的规则。
没问题，您根本没有做错任何事情 - 不需要 sn-ps，您只需在您的问题中添加所有相关代码，您已经这样做了。为了您自己的利益，在可能的情况下使用 sn-ps 是个好主意，因为它使我们更容易提供帮助:)

标签： javascript html css forms

【解决方案1】：

问题在于您更改表单上的类的方式。

您正在使用具有二元操作的theForm.classList.toggle() - 如果该类不存在则添加该类，如果存在则将其删除。当您只有 2 个选项时，这很好 - 要么是“一个”，要么是“两个”。

这不适用于两个以上的类，因此您可以这样做：

清除表单上的现有类
检查单击了哪个单选按钮
从该单选按钮获取 id
将相应的类添加到表单 - 您的类与单选按钮的名称匹配（例如，当您单击 id 为“one”的单选按钮时，要添加到表单的类名称也是“one”） - 这意味着您可以简单地使用 id 作为类名

你可以在你的 for 循环中这样做：

for (var i = 0; i < rad.length; i++) {
    rad[i].addEventListener('change', function() {
        theForm.className = "";    /* remove existing class from the form */
        /* "this" is the clicked radio button, so add it's id as the class */ 
        theForm.classList.add(this.id);    
    });
}

工作示例：

var theForm = document.getElementById('theForm');
var rad = theForm.radios;

for (var i = 0; i < rad.length; i++) {
    rad[i].addEventListener('change', function() {
        theForm.className = "";    /* remove existing class from the form */
        /* "this" is the clicked radio button, so add it's id as the class */ 
        theForm.classList.add(this.id);   
    });
}

.conditional1, .conditional2, .conditional3, .conditional4 {
    display: none;
}

.one .conditional1 { display: block; }
.two .conditional2 { display: block; }
.three .conditional3 { display: block; }
.four .conditional4 { display: block; }

fieldset { margin: 1rem; }

<form id="theForm" class="">
    <fieldset id="outer">

    <legend>Please Select File</legend>

    <div class="radio-wrap">
        <label for="one">GST</label>
        <input type="radio" id="one" name="radios" value="one">
    </div>

            <fieldset class="conditional1">
                    <legend>GST</legend>
                    <div class="radio-wrap">
                        <input type="radio" id="aye1" name="condition1" value="aye">
                        <label for="aye1">Aye1</label>
                    </div>
                    <div class="radio-wrap">
                        <input type="radio" id="nay1" name="condition1" value="nay">
                        <label for="nay1">Nay1</label>
                    </div>
            </fieldset>

    <div class="radio-wrap">
        <label for="two">Two</label>
        <input type="radio" id="two" name="radios" value="two">
    </div>

            <fieldset class="conditional2">
                <legend>If Two is set</legend>
                <div class="radio-wrap">
                    <input type="radio" id="aye2" name="condition2" value="aye">
                    <label for="aye2">Aye2</label>
                </div>
                <div class="radio-wrap">
                    <input type="radio" id="nay2" name="condition2" value="nay">
                    <label for="nay2">Nay2</label>
                </div>
            </fieldset>

    <div class="radio-wrap">
        <label for="three">Three</label>
        <input type="radio" id="three" name="radios" value="three">
    </div>

            <fieldset class="conditional3">
                <legend>If Three is set</legend>
                <div class="radio-wrap">
                    <input type="radio" id="aye3" name="condition3" value="aye">
                    <label for="aye3">Aye3</label>
                </div>
                <div class="radio-wrap">
                    <input type="radio" id="nay3" name="condition3" value="nay">
                    <label for="nay3">Nay3</label>
                </div>
            </fieldset>

    <div class="radio-wrap">
        <label for="four">Four</label>
        <input type="radio" id="four" name="radios" value="four">
    </div>

            <fieldset class="conditional4">
                <legend>If Four is set</legend>
                <div class="radio-wrap">
                    <input type="radio" id="aye4" name="condition4" value="aye4">
                    <label for="aye4">Aye4</label>
                </div>
                <div class="radio-wrap">
                    <input type="radio" id="nay4" name="condition4" value="nay4">
                    <label for="nay3">Nay3</label>
                </div>
            </fieldset>


</fieldset>
</form>

【讨论】：

@leopardlazy 这应该对你有用，如果它没有让我知道的话。如果是这样，您可以考虑通过检查灰色复选标记来接受它 - 这会将问题标记为在网站上已解决，并让其他用户知道如果他们有类似的问题，答案可能有用。再加上你会得到一些代表点:)