HTML 根据值隐藏 <div>

Question

我对 html 很陌生，并尝试根据用户是否选择一个选项来隐藏 Web 表单中的一些选项。例如，如果他们选择食品包装，则应隐藏自定义食品选项。这是可以在 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>

这是我用于选项的代码，我想要隐藏的区域也是 div。

任何帮助深表感谢！

Answer 1

你肯定需要一个同样的java脚本。希望这有效。function onChange() {&nbsp; const nodes = document.getElementsByName('Package');&nbsp; var selectedValue;&nbsp; // Get selected radio&nbsp; for (var i = 0, length = nodes.length; i < length; i++) {&nbsp; &nbsp; if (nodes[i].checked) {&nbsp; &nbsp; &nbsp; selectedValue = nodes[i].value;&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; }&nbsp; }&nbsp; // Showing all nodes first&nbsp; const nodePostFix = ['A', 'B', 'C', 'D'];&nbsp; nodePostFix.forEach(node => {&nbsp; &nbsp; document.getElementById('hidden-for-' + node).style.display = 'block';&nbsp; });&nbsp; //Hide the selected node&nbsp; document.getElementById('hidden-for-' + selectedValue).style.display = 'none';};<div class="large-2 columns">&nbsp; &nbsp; <label><b>Packages</b></label>&nbsp; </div>&nbsp; <div class="large-10 columns">&nbsp; &nbsp; <div class="large-3 columns">&nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" value="A" name="Package" checked&nbsp; onchange="onChange()"><label>A</label>&nbsp; &nbsp; &nbsp; &nbsp; <div id="hidden-for-A">Hide on selecting A</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="large-3 columns">&nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" value="B"&nbsp; name="Package" onchange="onChange()"><label>B</label>&nbsp; &nbsp; &nbsp; &nbsp; <div id="hidden-for-B">Hide on selecting B</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="large-3 columns">&nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" value="C" name="Package" onchange="onChange()"><label>C</label>&nbsp; &nbsp; &nbsp; &nbsp; <div id="hidden-for-C">Hide on selecting C</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="large-3 columns">&nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" value="D" name="Package" onchange="onChange()"><label>D</label>&nbsp; &nbsp; &nbsp; &nbsp; <div id="hidden-for-D">Hide on selecting b</div>&nbsp; &nbsp; </div></div>

Answer 2

添加这个CSSinput[type="radio"]:checked+label{&nbsp; &nbsp; display:none;}input[type="radio"]:checked{&nbsp; &nbsp;display:none;}

Answer 3

仅使用 HTML 无法完成此操作。最好使用一个小脚本来简单地完成此操作：const luxuryElement = document.querySelector("#luxury-div");const customElement = document.querySelector("#custom-div");function selected(value) {&nbsp; showElement(luxuryElement);&nbsp; showElement(customElement);&nbsp;&nbsp;&nbsp; if (value == 'luxury') hideElement(luxuryElement);&nbsp; if (value == 'custom') hideElement(customElement);}function hideElement(element) {&nbsp; element.style.visibility = "hidden";}function showElement(element) {&nbsp; element.style.visibility = "visible";}<div class="large-2 columns">&nbsp; <label><b>Packages</b></label></div><!--column--><div class="large-10 columns">&nbsp; <div class="large-3 columns">&nbsp; &nbsp; <input type="radio" onchange="selected('standard')" value="A" name="Package" checked><label>Standard Package</label>&nbsp; </div>&nbsp; <!--column-->&nbsp; <div class="large-3 columns">&nbsp; &nbsp; <input type="radio" onchange="selected('luxury')" value="B" name="Package"><label>Luxe Package</label>&nbsp; </div>&nbsp; <!--column-->&nbsp; <div class="large-3 columns">&nbsp; &nbsp; <input type="radio" onchange="selected('package')" value="C" name="Package"><label>Ultimate Package</label>&nbsp; </div>&nbsp; <!--column-->&nbsp; <div class="large-3 columns">&nbsp; &nbsp; <input type="radio" onchange="selected('custom')" value="D" name="Package"><label>Custom Package</label>&nbsp; </div>&nbsp; <!--column--></div><div id="luxury-div">To hide if luxury is chosen</div><div id="custom-div">To hide if custom is chosen</div>请注意，这只是一个示例，有很多方法可以实现这一点。上面的脚本只是一个例子。