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

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

HTML 根據(jù)值隱藏 <div>

HTML 根據(jù)值隱藏 <div>

我對(duì) html 很陌生，并嘗試根據(jù)用戶是否選擇一個(gè)選項(xiàng)來(lái)隱藏 Web 表單中的一些選項(xiàng)。例如，如果他們選擇食品包裝，則應(yīng)隱藏自定義食品選項(xiàng)。這是可以在 html 中完成還是需要腳本？<div class="large-2 columns">  <label><b>Packages</b></label></div><!--column--><div class="large-10 columns">  <div class="large-3 columns">    <input type="radio" value="A" name="Package" checked><label>Standard Package</label>  </div>  <!--column-->  <div class="large-3 columns">    <input type="radio" value="B" name="Package"><label>Luxe Package</label>  </div>  <!--column-->  <div class="large-3 columns">    <input type="radio" value="C" name="Package"><label>Ultimate Package</label>  </div>  <!--column-->  <div class="large-3 columns">    <input type="radio" value="D" name="Package"><label>Custom Package</label>  </div>  <!--column--></div>這是我用于選項(xiàng)的代碼，我想要隱藏的區(qū)域也是 div。任何幫助深表感謝！
查看完整描述

3 回答

?
萬(wàn)千封印

TA貢獻(xiàn)1891條經(jīng)驗(yàn) 獲得超3個(gè)贊

你肯定需要一個(gè)同樣的java腳本。希望這有效。


function onChange() {

  const nodes = document.getElementsByName('Package');

  var selectedValue;

  // Get selected radio

  for (var i = 0, length = nodes.length; i < length; i++) {

    if (nodes[i].checked) {

      selectedValue = nodes[i].value;

      break;

    }

  }

  // Showing all nodes first

  const nodePostFix = ['A', 'B', 'C', 'D'];

  nodePostFix.forEach(node => {

    document.getElementById('hidden-for-' + node).style.display = 'block';

  });


  //Hide the selected node

  document.getElementById('hidden-for-' + selectedValue).style.display = 'none';

};

<div class="large-2 columns">

    <label><b>Packages</b></label>

  </div>

  <div class="large-10 columns">

    <div class="large-3 columns">

        <input type="radio" value="A" name="Package" checked  onchange="onChange()"><label>A</label>

        <div id="hidden-for-A">Hide on selecting A</div>

    </div>

    <div class="large-3 columns">

        <input type="radio" value="B"  name="Package" onchange="onChange()"><label>B</label>

        <div id="hidden-for-B">Hide on selecting B</div>

    </div>

    <div class="large-3 columns">

        <input type="radio" value="C" name="Package" onchange="onChange()"><label>C</label>

        <div id="hidden-for-C">Hide on selecting C</div>

    </div>

    <div class="large-3 columns">

        <input type="radio" value="D" name="Package" onchange="onChange()"><label>D</label>

        <div id="hidden-for-D">Hide on selecting b</div>

    </div>

</div>


查看完整回答
反對(duì) 回復(fù) 2023-09-04
?
慕容森

TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超18個(gè)贊

添加這個(gè)CSS


input[type="radio"]:checked+label{

    display:none;

}


input[type="radio"]:checked{

   display:none;

}


查看完整回答
反對(duì) 回復(fù) 2023-09-04
?
揚(yáng)帆大魚

TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超9個(gè)贊

僅使用 HTML 無(wú)法完成此操作。最好使用一個(gè)小腳本來(lái)簡(jiǎn)單地完成此操作：


const luxuryElement = document.querySelector("#luxury-div");

const customElement = document.querySelector("#custom-div");


function selected(value) {

  showElement(luxuryElement);

  showElement(customElement);

  

  if (value == 'luxury') hideElement(luxuryElement);

  if (value == 'custom') hideElement(customElement);

}


function hideElement(element) {

  element.style.visibility = "hidden";

}


function showElement(element) {

  element.style.visibility = "visible";

}

<div class="large-2 columns">

  <label><b>Packages</b></label>

</div>

<!--column-->

<div class="large-10 columns">

  <div class="large-3 columns">

    <input type="radio" onchange="selected('standard')" value="A" name="Package" checked><label>Standard Package</label>

  </div>

  <!--column-->

  <div class="large-3 columns">

    <input type="radio" onchange="selected('luxury')" value="B" name="Package"><label>Luxe Package</label>

  </div>

  <!--column-->

  <div class="large-3 columns">

    <input type="radio" onchange="selected('package')" value="C" name="Package"><label>Ultimate Package</label>

  </div>

  <!--column-->

  <div class="large-3 columns">

    <input type="radio" onchange="selected('custom')" value="D" name="Package"><label>Custom Package</label>

  </div>

  <!--column-->

</div>


<div id="luxury-div">To hide if luxury is chosen</div>

<div id="custom-div">To hide if custom is chosen</div>

請(qǐng)注意，這只是一個(gè)示例，有很多方法可以實(shí)現(xiàn)這一點(diǎn)。上面的腳本只是一個(gè)例子。



查看完整回答
反對(duì) 回復(fù) 2023-09-04
  • 3 回答
  • 0 關(guān)注
  • 182 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號(hào)

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