[英]How to add more than two options in a drop down custom list radio button?
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. 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>
It works well when you have two options but when you add third radio button it starts malfunctioning.当您有两个选项时效果很好,但是当您添加第三个单选按钮时它开始出现故障。
This is the code where I tried to add more radio buttons:这是我尝试添加更多单选按钮的代码:
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>
I'm a beginner, so any help is appreciated.我是一个初学者,所以任何帮助表示赞赏。
The problem is with the way you are changing the classes on your form.问题在于您更改表单上的类的方式。
You are using theForm.classList.toggle()
which has a binary action - it either adds the class if it doesn't exist or removes it if it does.您正在使用具有二进制操作的
theForm.classList.toggle()
- 如果 class 不存在则添加它,如果存在则将其删除。 That is fine when you only have 2 options - its either going to be "one" or "two".当您只有 2 个选项时,这很好——要么是“一个”,要么是“两个”。
This doesn't work with more than two classes, so you can do this:这不适用于两个以上的类,因此您可以这样做:
You can do that in your for loop like this:你可以在你的 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);
});
}
Working example:工作示例:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.