How do I develop a checkbox form using JavaScript and HTML?
Question
I am currently developing an order form with JavaScript and HTML and need to have a radio box checked for a "build your own" option. Following that, I need to have 6 checkboxes with options of different fruits to choose from. Would I use the switch statement for the checkboxes? This is what I have so far:
JavaScript:
for (var i = 0; i < document.forms[0].optBuildown.length; i++){
if (document.forms[0].optBuildown[i].checked){
buildOwn = i;
}
}
switch(buildOwn){
case 0:
strPC = strPC + "<br><br>Build your own";
break;
}
HTML
<td valign="top">Build your own:</td>
<td valign="top" nowrap="nowrap">
<input type="radio" name="chkOption" value="opt1" onclick="return changeOption()" /> <br />
<input type="checkbox" name="chkOption" value="1" onclick="return orderSummary()" />Blueberry
<input type="checkbox" name="chkOption" value="2" onclick="return orderSummary()" />Strawberry
<input type="checkbox" name="chkOption" value="3" onclick="return orderSummary()" />
Banana
</td>
I am a beginner coder (as you can see lol) if you can help in any way it would be greatly appreciated.
2 answers
solution1
0 2020-03-18 07:16:44
Your requirements are a bit unclear, but I dont think you need a switch statement to achieve the functionality, see snippet.
If your 'fruits' checkbox list is dynamic, you can construct it in the ToggleFruitSelection function
function ToggleFruitSelection(){ if(document.querySelector('input[name="formtype"]:checked').value === "custom"){ document.getElementById('customFruit').classList.remove("hidden"); }else{ document.getElementById('customFruit').classList.add("hidden"); } }
.hidden{ display:none; }
<label><input onChange=ToggleFruitSelection() value="standard" type="radio" name="formtype">Standard</label><br/> <label><input onChange=ToggleFruitSelection() value="custom" type="radio" name="formtype">Build your own</label><br/> <hr/> <div class="hidden" id="customFruit"> <label><input value="standard" type="checkbox">Grape</label><br/> <label><input value="standard" type="checkbox">Apple</label><br/> <label><input value="standard" type="checkbox">Pear</label><br/> <label><input value="standard" type="checkbox">Orange</label><br/> <label><input value="standard" type="checkbox">Strawberry</label><br/> <label><input value="standard" type="checkbox">Mango</label><br/> <label><input value="standard" type="checkbox">Watermelon</label><br/> </div>
solution2
-1 2020-03-18 10:43:13
If the requirement is as below
1)There has to be only one radio button named as Build your own
2)If the radio button is checked then the six check boxes needs to appear
Then you can try the below code using Jquery .
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Show Hide Elements Using Radio Buttons</title> <style> .custom{ display: none; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script> $(document).ready(function(){ $('input[type="radio"]').click(function(){ var inputValue = $(this).attr("value"); var targetBox = $("." + inputValue); $(".custom").not(targetBox).hide(); $(targetBox).show(); }); }); </script> </head> <body> <div> <label><input type="radio" name="colorRadio" value="custom"> Build your own</label> </div> <div class="custom" id="customFruit"> <label><input value="standard" type="checkbox">Grape</label><br/> <label><input value="standard" type="checkbox">Apple</label><br/> <label><input value="standard" type="checkbox">Pear</label><br/> <label><input value="standard" type="checkbox">Orange</label><br/> <label><input value="standard" type="checkbox">Strawberry</label><br/> <label><input value="standard" type="checkbox">Mango</label><br/> <label><input value="standard" type="checkbox">Watermelon</label><br/> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.