如何将不同的部分应用于单选按钮

Question

我有这个学校项目，为每个选定的单选按钮显示不同的下拉选项。我尝试了一些 JavaScript 代码，但它根本不起作用。

我需要在单击“尺码”单选按钮时显示对应的尺码下拉选择器。以及颜色。仅显示颜色下拉选择器

提前感谢您的帮助。

下面是代码

<form>
  <fieldset>
    <p>

     <input type = "radio"
            name = "sizes"
            id = "sizes"
            value = ""
            checked = "checked">
     <label for = "sizes"> Sizes </label>

     <input type = "radio"
            name = "colors"
            id = "colors"
            value = "">
     <label for = "colors"> Colors </label>

    </p>       
  </fieldset>     
</form>



<label for="small-size"> Small Size </label>
  <select name="size" id="size">
     <option value="1" selected> Size 1 </option>
     <option value="2"> Size 2 </option>
     <option value="3"> Size 3 </option>
   </select>

<label for="big-size"> Big Size </label>
  <select name="size" id="size">
     <option value="1" selected> Size 1 </option>
     <option value="2"> Size 2 </option>
     <option value="3"> Size 3 </option>
   </select>

<label for="dark"> Dark Colors </label>
   <select name="canvas" id="canvas">
      <option value="1" selected> Color 1</option>
      <option value="2"> Color 2 </option>
      <option value="3"> Color 3 </option>
   </select>

<label for="light"> Light Colors </label>
   <select name="canvas" id="canvas">
      <option value="1" selected> Color 1</option>
      <option value="2"> Color 2 </option>
      <option value="3"> Color 3 </option>
   </select>

https://jsfiddle.net/Farsoun/dw813ky2/9/

Answer 1

在发布此类内容时，您确实应该至少表现出某种尝试，尤其是使用 JavaScript 标签时。

无论如何，要做到这一点，您需要在用户单击单选按钮和 show/hide 相应元素时收听。

这是一个示例：

document.getElementById('colors').addEventListener("click", function(e){
   document.getElementById("colors-selections").style.display = "block";
   document.getElementById("size-selections").style.display = "none";
});

如果您将来有两个以上的元素，我建议您使用 onchange，这样您就可以在它未切换时隐藏它，而不是每次单击新的单选按钮时都隐藏其他所有内容。

如果您只想使用 CSS，您将不得不使用 :checked 属性并隐藏或显示另一个元素：

其他用户已经询问过这个问题，例如：

如何将不同的部分应用于单选按钮

How to apply different section to a radio button

javascript

radio-button