Question

当我检查两个特定单选按钮之一时，我试图让表单的某个部分出现。

以下是单选按钮的HTML：

<strong>Window:</strong><br>
<input type="radio" name="wname" value="Hann" checked> Hann
<input type="radio" name="wname" value="Hamming"> Hamming
<input type="radio" name="wname" value="Bartlett"> Bartlett
<input type="radio" name="wname" value="Rectangular"> Rectangular
<input type="radio" name="wname" value="Kaiser"> Kaiser
<input type="radio" name="wname" value="Dolph"> Dolph<p>

我想要的是，当选中Kaiser或Dolph按钮时，会出现此表单部分：

<div class="wnum">
<strong>1. Window adjust parameter (-10 - 10):</strong><br>
<select name="selectbox">
    {% for i in range(-10,11):  %}
    <option value="{{ i }}">{{ i }}</option>
    {% endfor %}
</select><p>
</div>

我已经尝试了很多解决方案，我在这里有点迷失..

这是有效的，但只有两个单选按钮：

HTML：

<input type=radio id="show" name="group">
<input checked type=radio id="hide" name="group">
<label id="id1" for="show"><span id="id1">
<div class="wnum">
<strong>1. Window adjust parameter (-10 - 10):</strong><br>
<select name="selectbox">
    {% for i in range(-10,11):  %}
    <option value="{{ i }}">{{ i }}</option>
    {% endfor %}
</select><p>
</div>
</span></label>

<label id="id2" for="hide"><span id="id2">
<div class="wnum">
<strong>2. Window adjust parameter (-10 - 10):</strong><br>
<select name="selectbox">
    {% for i in range(-10,11):  %}
    <option value="{{ i }}">{{ i }}</option>
    {% endfor %}
</select><p>
</div>

CSS：

input#show:checked ~ label#id1{
  display:none;
}
input#show:checked ~ label#id2{
   display:block;
}

input#hide:checked ~ label#id2{
   display:none;
}
input#hide:checked ~ label#id1{
   display:block;
}

我真的真的被困在这里我试图让它工作至少5个小时..所以我想知道是否有CSS的解决方案，或者可能是Javascript，但我更喜欢仅限CSS。

尝试只使用一个复选框或两个无线电，但使用这6个无线电时，没有问题。

到目前为止，我已经尝试了那些input[class="hiden-wnum"]:checked解决方案，那些input:not(:checked) + label#something解决方案以及两个或三个不同的Javascript解决方案，但没有一个有效。

Answer 1

如果您可以更改标记，建议的解决方案：

如果在触发表单的输入中使用类，这样会更好：

.triggers-form:checked + .wnum {
  display: block;
}
.wnum {
  display: none;
}

<强> JSFIDDLE

.triggers-form:checked + .wnum {
  display: block;
}
.wnum {
  display: none;
}

<strong>Window:</strong>
<br>
<input type="radio" name="wname" value="Hann" checked>Hann
<input type="radio" name="wname" value="Hamming">Hamming
<input type="radio" name="wname" value="Bartlett">Bartlett
<input type="radio" name="wname" value="Rectangular">Rectangular
<input class="triggers-form" type="radio" name="wname" value="Kaiser">Kaiser
<div class="wnum">
  <strong>Kaiser Form Appears : 1. Window adjust parameter (-10 - 10):</strong>
  <br>
  <select name="selectbox">
    {% for i in range(-10,11): %}
    <option value="{{ i }}">{{ i }}</option>
    {% endfor %}
  </select>
</div>
<input class="triggers-form" type="radio" name="wname" value="Dolph">Dolph
<div class="wnum">
  <strong>Dolph Form Appears : 1. Window adjust parameter (-10 - 10):</strong>
  <br>
  <select name="selectbox">
    {% for i in range(-10,11): %}
    <option value="{{ i }}">{{ i }}</option>
    {% endfor %}
  </select>
</div>

如果要在选择其中任何一个时显示相同的表单，您可以执行以下操作：

input[value=Kaiser]:checked ~ .wnum,
input[value=Dolph]:checked ~ .wnum {
  display: block;
}
.wnum {
  display: none;
}

<强> JSFIDDLE

input[value=Kaiser]:checked ~ .wnum,
input[value=Dolph]:checked ~ .wnum {
  display: block;
}
.wnum {
  display: none;
}

<strong>Window:</strong>
<br>
<input type="radio" name="wname" value="Hann" checked>Hann
<input type="radio" name="wname" value="Hamming">Hamming
<input type="radio" name="wname" value="Bartlett">Bartlett
<input type="radio" name="wname" value="Rectangular">Rectangular
<input type="radio" name="wname" value="Kaiser">Kaiser
<input type="radio" name="wname" value="Dolph">Dolph


<div class="wnum">
  <strong>1. Window adjust parameter (-10 - 10):</strong>
  <br>
  <select name="selectbox">
    {% for i in range(-10,11): %}
    <option value="{{ i }}">{{ i }}</option>
    {% endfor %}
  </select>
</div>

如果要显示不同的表单，每个表单对应于所选的复选框，您可以执行以下操作：

input[value=Kaiser]:checked + .wnum,
input[value=Dolph]:checked + .wnum {
  display: block;
}
.wnum {
  display: none;
}

<强> JSFIDDLE

input[value=Kaiser]:checked + .wnum,
input[value=Dolph]:checked + .wnum {
  display: block;
}
.wnum {
  display: none;
}

<strong>Window:</strong>
<br>
<input type="radio" name="wname" value="Hann" checked>Hann
<input type="radio" name="wname" value="Hamming">Hamming
<input type="radio" name="wname" value="Bartlett">Bartlett
<input type="radio" name="wname" value="Rectangular">Rectangular
<input type="radio" name="wname" value="Kaiser">Kaiser
<div class="wnum">
  <strong>Kaiser Form Appears : 1. Window adjust parameter (-10 - 10):</strong>
  <br>
  <select name="selectbox">
    {% for i in range(-10,11): %}
    <option value="{{ i }}">{{ i }}</option>
    {% endfor %}
  </select>
</div>
<input type="radio" name="wname" value="Dolph">Dolph
<div class="wnum">
  <strong>Dolph Form Appears : 1. Window adjust parameter (-10 - 10):</strong>
  <br>
  <select name="selectbox">
    {% for i in range(-10,11): %}
    <option value="{{ i }}">{{ i }}</option>
    {% endfor %}
  </select>
</div>

Answer 2

对于这样的事情，如果你使用JavaScript，你的生活会更容易。

这是一个包含6个单选按钮input元素和div的解决方案，只有在选择了第5个或第6个单选按钮时才会显示。

<div id="buttons">
  <input type="radio" name="group" value="1" checked> Button 1
  <br>
  <input type="radio" name="group" value="2"> Button 2
  <br>
  <input type="radio" name="group" value="3"> Button 3
  <br>
  <input type="radio" name="group" value="4"> Button 4
  <br>
  <input type="radio" name="group" value="5"> Button 5
  <br>
  <input type="radio" name="group" value="6"> Button 6
  <br>
</div>

<div id="section">
  This section should only be visible when either button 5 or button 6 is selected.
</div>

默认情况下，

#section隐藏了CSS

#section {
  display: none;
}

然后我们在每个按钮上附加一个事件监听器，以根据需要显示/隐藏#section元素。

var buttons = document.querySelector("#buttons").querySelectorAll("input");
var section = document.querySelector("#section");

for (var i = 0; i < buttons.length; i++) {
    setListenerOnButton(i);
}

function setListenerOnButton(i) {
    buttons[i].addEventListener("click", function (event) {
    if (i == 4 || i == 5) {
        section.style.display = "initial";
    } else {
        section.style.display = "none";
    }
  });
}

这是一个演示它的JSFiddle：https://jsfiddle.net/reid_horton/3pfu8dtp/

Answer 3

有几种方法可以通过检查特定的单选按钮来显示div。 Snippet通过JavaScript演示1种方式，通过CSS演示另一种方式。

JS

详细信息

表格集合

这是老派的方式：

引用<form>元素（您没有，但您应该）。
- var mainForm = document.forms[0];
- forms将收集文档上的每个<form>。如果只有一个<form>，那么form[0]作为DOM对象引用。 form[1]用于第二个<form>等。
接下来，引用mainForm的子元素与.elements形成元素
- var rad5 = mainForm.elements[5];
- var rad6 = mainForm.elements[6];
然后在eventListener上设置mainForm以进行任何点击...
- mainForm.addEventListener('click',...
...当然还有事件处理程序。
- 条件：如果选中第5或第6个单选按钮... - if(rad5.checked || rad6.checked) {...
- True：...找到div.wnum ...
- var wnum = document.querySelector('.wnum');
- ......并展示它！
- wnum.style.display = 'block';

CSS

详细信息

在适当的元素（即:checked）上安排或找到使条件（即input[type="radio"]）成立的正确位置......
......所以它在前面＆＃34;您希望影响的元素（即.wnum）。

原因：input:checked ~

效果：div.wnum { display: block}

由于输入中没有任何类别或ID，但我们知道所有内容和内容，我们会使用nth-of-type来理清哪些无线电是Kaiser和Dorph。

input:nth-of-type(5)] [Kaiser
:checked] [凯撒州
~] [任何兄弟元素; Dorph和wnum;把它想象成一个元素＆＃34;更年轻＆＃34;之后来的兄弟姐妹或兄弟姐妹。
div或.wnum或div.num] [目标
{display:block}] [效果

为了测试CSS，请禁用JS（源代码中的路线）。

段

＆＃13;

/* FORM  (remove to disable JS ->)*/
var mainForm = document.forms[0];
// KAISER
var rad5 = mainForm.elements[5];
// DOLPH
var rad6 = mainForm.elements[6];

// EVENT LISTENER & HANDLER
mainForm.addEventListener('click', function(e) {
  // CONDITION
  if (rad5.checked || rad6.checked) {
    var wnum = document.querySelector('.wnum');
    wnum.style.display = 'block';
  }
}, false);

＆＃13;

.wnum {
  display: none;
}
input:nth-of-type(5):checked ~ div {
  display: block;
}
input:nth-of-type(6):checked ~ .wnum {
  display: block;
}

＆＃13;

<form id='main' name='main'>
  <fieldset>
    <legend><b>Window: </b>
    </legend>

    <input type="radio" name="wname" value="Hann" checked>
    <label>Hann</label>

    <input type="radio" name="wname" value="Hamming">
    <label>Hamming</label>

    <input type="radio" name="wname" value="Bartlett">
    <label>Bartlett</label>

    <input type="radio" name="wname" value="Rectangular">
    <label>Rectangular</label>

    <input type="radio" name="wname" value="Kaiser">
    <label>Kaiser</label>

    <input type="radio" name="wname" value="Dolph">
    <label>Dolph</label>

    <div class="wnum">
      <label><b>1. Window adjust parameter (-10 - 10): </b>
      </label>
      <br>
      <select name="selectbox">
        {% for i in range(-10,11): %}
        <option value="{{ i }}">{{ i }}</option>
        {% endfor %}
      </select>
    </div>
  </fieldset>
  <form>

＆＃13;

Answer 4

您可以尝试将所有内容包装在容器和输入（或标签）切换容器类中。基于此课程，您可以将display: block或none切换为隐藏的section，或使用jquery执行此类简单操作：

<input type="radio" id="open-section" />
<input type="radio" id="something-else" />
<input type="radio" id="some-more" />

<div id="section" style="display: none;"></div>

$('#open-section').click(function () {
    $("#section").show();
});

隐藏或显示css / js中复选框的内容

4 个答案:

JS

详细信息

CSS

详细信息

段