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

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

我是一个初学者编码器（如你所见，哈哈），如果你能以任何方式提供帮助，我将不胜感激。

哈士奇WWW

浏览 90回答 2

2回答

UYOU

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

0

0

大话西游666

如果要求如下1) 必须只有一个名为 Build your own 的单选按钮2）如果选中单选按钮，则需要出现六个复选框然后您可以使用 Jquery 尝试以下代码。<!DOCTYPE html><html><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>                            

0

0

随时随地看视频慕课网APP

相关分类

JavaScript