javascript - 如何使用 JavaScript 和 HTML 开发复选框表单？

Question

我目前正在使用 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>

我是一名初学者编码员(如您所见，哈哈)如果您能以任何方式提供帮助，我们将不胜感激。

Answer 1

您的要求有点不清楚，但我认为您不需要 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>