如何使用 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>

Answer 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>

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

问题描述

2 个解决方案

解决方案1
0 2020-03-18 07:16:44

解决方案2
-1 2020-03-18 10:43:13

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

问题描述

2 个解决方案

解决方案1 0 2020-03-18 07:16:44

解决方案2 -1 2020-03-18 10:43:13

解决方案1
0 2020-03-18 07:16:44

解决方案2
-1 2020-03-18 10:43:13