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

Question

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>

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

Answer 1

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

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

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

1. 清除表格上已有的class
2. 检查单击了哪个单选按钮
3. 从该单选按钮获取 id
4. 将相应的 class 添加到表单中 - 您的类与单选按钮的名称相匹配（例如，当您单击 ID 为“one”的单选按钮时，要添加到表单中的 class 名称也是“one”） - 这意味着您可以只需使用 id 作为 class 名称

你可以在你的 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>