如何使用 JavaScript 和 HTML 开发复选框表单？答案

【问题标题】：How do I develop a checkbox form using JavaScript and HTML?如何使用 JavaScript 和 HTML 开发复选框表单？
【发布时间】：2020-06-29 05:22:35
【问题描述】：

我目前正在使用 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 语句吗？” - 实现什么 ...？

标签： javascript html forms checkbox switch-statement

【解决方案1】：

您的要求有点不清楚，但我认为您不需要switch语句来实现功能，请参阅sn-p。

如果您的“水果”复选框列表是动态的，您可以在 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) 必须只有一个名为 Build your own 的单选按钮

2)如果选中单选按钮，则需要出现六个复选框

然后您可以使用 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>

【讨论】：

未标记为 jQuery