javascript - 如何使用JavaScript和HTML开发复选框形式？

我目前正在使用JavaScript和HTML开发订单，并且需要选中一个单选框以选择“自己构建”选项。接下来，我需要有6个复选框，其中包含不同水果的选项可供选择。我会在复选框中使用switch语句吗？这是我到目前为止所拥有的：

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>

我是一个初学者（如您所见，大声笑），如果您能以任何方式提供帮助，将不胜感激。

最佳答案

您的要求还不清楚，但是我认为您不需要switch语句即可实现功能，请参见代码段。

如果您的“水果”复选框列表是动态的，则可以在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>

关于javascript - 如何使用JavaScript和HTML开发复选框形式？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60734068/