第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何使用 JavaScript 和 HTML 開發(fā)復(fù)選框表單？

如何使用 JavaScript 和 HTML 開發(fā)復(fù)選框表單？

哈士奇WWW 2022-05-22 15:57:52
我目前正在使用 JavaScript 和 HTML 開發(fā)一個訂單表單，并且需要選中一個單選框以查看“構(gòu)建您自己的”選項。之后，我需要有 6 個帶有不同水果選項的復(fù)選框可供選擇。我會為復(fù)選框使用 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>我是一個初學(xué)者編碼器（如你所見，哈哈），如果你能以任何方式提供幫助，我將不勝感激。
查看完整描述

2 回答

?
UYOU

TA貢獻(xiàn)1878條經(jīng)驗 獲得超4個贊

您的要求有點不清楚，但我認(rèn)為您不需要 switch 語句來實現(xiàn)功能，請參閱代碼段。


如果您的“水果”復(fù)選框列表是動態(tài)的，您可以在ToggleFruitSelection函數(shù)中構(gòu)建它


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>


查看完整回答
反對 回復(fù) 2022-05-22
?
大話西游666

TA貢獻(xiàn)1817條經(jīng)驗 獲得超14個贊

如果要求如下


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


2）如果選中單選按鈕，則需要出現(xiàn)六個復(fù)選框


然后您可以使用 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>                            


查看完整回答
反對 回復(fù) 2022-05-22
  • 2 回答
  • 0 關(guān)注
  • 106 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號