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() {

  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>

Answer 2

添加这个CSS

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

    display:none;

}

input[type="radio"]:checked{

   display:none;

}

Answer 3

仅使用 HTML 无法完成此操作。最好使用一个小脚本来简单地完成此操作：

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>

请注意，这只是一个示例，有很多方法可以实现这一点。上面的脚本只是一个例子。