如何更改显示:无选择选项

Question

我想使用纯JavaScript。我有两个选择。当选择"是"时，我希望显示一个隐藏的div。

function showDiv() {
document.getElementById().classList ? 'd-block' : 'd-none';
}

<div class="form-check">
<input class="form-check-input" type="radio" value="1" id="yes" name="question" onclick="showDiv()">
<label class="form-check-label" for="yes">Yes</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" value="0" id="no" name="question" onclick="showDiv()">
<label class="form-check-label" for="no">No</label>
</div>
<div id="skillMaster" class="d-none">Test</div>

Answer 1

逻辑

• 使用document.querySelector('input[name="question"]:checked').value获取所选值，返回所选复选框的值
• 如果所选值为"1"，则添加d-block并删除d-none
• 如果所选值为"0"，则添加d-none并删除d-block

工作Fiddle

function showDiv() {
const selectedValue = document.querySelector('input[name="question"]:checked').value;
const addClass = selectedValue === '1' ? 'd-block' : 'd-none';
const removeClass = selectedValue === '0' ? 'd-block' : 'd-none';
document.getElementById('skillMaster').classList.add(addClass);
document.getElementById('skillMaster').classList.remove(removeClass);
}

.d-none {
display: none;
}
.d-block {
display: block;
}

<div class="form-check">
<input class="form-check-input" type="radio" value="1" id="yes" name="question" onclick="showDiv()">
<label class="form-check-label" for="yes">
Yes
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" value="0" id="no" name="question" onclick="showDiv()">
<label class="form-check-label" for="no">
No
</label>
</div>
<div id="skillMaster" class="d-none">Test</div>

Answer 2

您需要分发输入：

function toggleDiv(input) {
input ? $("#skillMaster").show() : $("#skillMaster").hide();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
<input class="form-check-input" type="radio" value="1" id="yes" name="question" onclick="toggleDiv(true)">
<label class="form-check-label" for="yes">
Yes
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" value="0" id="no" name="question" onclick="toggleDiv(false)">
<label class="form-check-label" for="no">
No
</label>
</div>
<div id="skillMaster" class="d-none">Test</div>

Answer 3

function showDiv() {
var x = document.getElementById("skillMaster");
if (x.style.display === "none") 
{
x.style.display = "block";
} 
else
{
x.style.display = "none";
}
}

这样就可以了，你所需要做的就是瞄准元素，这可以通过ID和Class来完成。如果需要，还可以更改其他样式特性。

关于else语句，它纯粹是因为可以对"yes"one_answers"no"调用函数，并分别隐藏或显示div