我目前正在使用 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>我是一个初学者编码器（如你所见，哈哈），如果你能以任何方式提供帮助，我将不胜感激。
2 回答
UYOU
TA贡献1878条经验 获得超4个赞
您的要求有点不清楚，但我认为您不需要 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>
大话西游666
TA贡献1817条经验 获得超14个赞
如果要求如下
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/150
提交
取消