如何使用 JavaScript 和 HTML 开发复选框表单？
[英]How do I develop a checkbox form using JavaScript and HTML?
问题描述
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.
我目前正在使用 JavaScript 和 HTML 开发一个订单表单，并且需要选中一个单选框以选择“构建您自己的”选项。 Following that, I need to have 6 checkboxes with options of different fruits to choose from.之后，我需要有 6 个复选框，其中包含可供选择的不同水果的选项。 Would I use the switch statement for the checkboxes?我会为复选框使用 switch 语句吗？ This is what I have so far:这是我到目前为止：
JavaScript: 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 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 个解决方案
解决方案1
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.您的要求有点不清楚，但我认为您不需要 switch 语句来实现该功能，请参阅代码段。
If your 'fruits' checkbox list is dynamic, you can construct it in the ToggleFruitSelection function如果您的“水果”复选框列表是动态的，您可以在ToggleFruitSelection函数中构建它
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>
解决方案2
-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 1) 必须只有一个名为 Build your own 的单选按钮
2)If the radio button is checked then the six check boxes needs to appear 2）如果选中单选按钮，则需要出现六个复选框
Then you can try the below code using Jquery .然后您可以使用 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.