首頁猿問如何使用 JavaScript 和...

如何使用 JavaScript 和 HTML 開發復選框表單？

JavaScript

哈士奇WWW 2022-05-22 15:57:52

我目前正在使用 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/>

<label><input value="standard" type="checkbox">Grape</label><br/>

<label><input value="standard" type="checkbox">Apple</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>

反對回復 2022-05-22

大話西游666

TA貢獻1817條經驗獲得超14個贊

如果要求如下

1) 必須只有一個名為 Build your own 的單選按鈕

2）如果選中單選按鈕，則需要出現六個復選框

然后您可以使用 Jquery 嘗試以下代碼。

<!DOCTYPE html>

<html>

<head>

<title>jQuery Show Hide Elements Using Radio Buttons</title>

<style>

.custom{

display: none;

}

</style>

$(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>

<label><input value="standard" type="checkbox">Grape</label><br/>

<label><input value="standard" type="checkbox">Apple</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>

反對回復 2022-05-22

2 回答
0 關注
116 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用 JavaScript 和 HTML 開發復選框表單？

如何使用 JavaScript 和 HTML 開發復選框表單？

2 回答

添加回答

如何使用 JavaScript 和 HTML 開發復選框表單？

如何使用 JavaScript 和 HTML 開發復選框表單？