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