javascript - 根据选择的单选按钮显示和/或隐藏输入框和标签

Question

我只想根据选择的单选按钮显示某些标签和输入框。 (可用 4 个单选按钮)

下面是我正在使用的代码，但我无法开始工作，我很确定有一种更简洁的编写方法，但不确定。谁能帮忙？

以下是影响输入命运的 4 个单选按钮:

<div class="radio-btn-aligning">
<span>
<label class="radio-container">Rectangle
<input type="radio" checked="checked" name="radio" 
onclick="javascript:yesnoCheck();" id="RectangleCheck">
<span class="radio-checkmark"></span>
</label>
<label class="radio-container">Oval
<input type="radio" name="radio" onclick="javascript:yesnoCheck();" 
id="OvalCheck">
<span class="radio-checkmark"></span>
</label>
<label class="radio-container">Round
<input type="radio" name="radio" onclick="javascript:yesnoCheck();" 
id="RoundCheck">
<span class="radio-checkmark"></span>
</label>
<label class="radio-container">Custom Oblong
<input type="radio" name="radio" onclick="javascript:yesnoCheck();" 
id="OblongCheck">
<span class="radio-checkmark"></span>
</label>
</span>
</div>

这是脚本:

<script type="text/javascript">
function yesnoCheck() {
if (document.getElementById('RectangleCheck').checked) {
document.getElementById('RectangleInput1').style.display = 'block';
document.getElementById('RectangleInput2').style.display = 'block';
document.getElementById('RectangleInput3').style.display = 'block';
document.getElementById('Rectangle-container1').style.display = 'block';
document.getElementById('Rectangle-container2').style.display = 'block';
document.getElementById('Rectangle-container3').style.display = 'block';
document.getElementById('OvalInput1').style.display = 'none';
document.getElementById('OvalInput2').style.display = 'none';
document.getElementById('OvalInput3').style.display = 'none';
document.getElementById('oval-container1').style.display = 'none';
document.getElementById('oval-container2').style.display = 'none';
document.getElementById('oval-container3').style.display = 'none';
document.getElementById('RoundInput1').style.display = 'none';
document.getElementById('RoundInput2').style.display = 'none';
document.getElementById('round-container').style.display = 'none';
document.getElementById('round-container2').style.display = 'none';
document.getElementById('OblongInput1').style.display = 'none';
document.getElementById('OblongInput2').style.display = 'none';
document.getElementById('OblongInput3').style.display = 'none';
document.getElementById('oblong-container1').style.display = 'none';
document.getElementById('oblong-container2').style.display = 'none';
document.getElementById('oblong-container3').style.display = 'none';
} 
elseif (document.getElementById('OvalCheck').checked) {
document.getElementById('RectangleInput1').style.display = 'none';
document.getElementById('RectangleInput2').style.display = 'none';
document.getElementById('RectangleInput3').style.display = 'none';
document.getElementById('Rectangle-container1').style.display = 'none';
document.getElementById('Rectangle-container2').style.display = 'none';
document.getElementById('Rectangle-container3').style.display = 'none';
document.getElementById('OvalInput1').style.display = 'block';
document.getElementById('OvalInput2').style.display = 'block';
document.getElementById('OvalInput3').style.display = 'block';
document.getElementById('oval-container1').style.display = 'block';
document.getElementById('oval-container2').style.display = 'block';
document.getElementById('oval-container3').style.display = 'block';
document.getElementById('RoundInput1').style.display = 'none';
document.getElementById('RoundInput2').style.display = 'none';
document.getElementById('round-container1').style.display = 'none';
document.getElementById('round-container2').style.display = 'none';
document.getElementById('OblongInput1').style.display = 'none';
document.getElementById('OblongInput2').style.display = 'none';
document.getElementById('OblongInput3').style.display = 'none';
document.getElementById('oblong-container1').style.display = 'none';
document.getElementById('oblong-container2').style.display = 'none';
document.getElementById('oblong-container3').style.display = 'none';
} 
elseif (document.getElementById('RoundCheck').checked) {
document.getElementById('RectangleInput1').style.display = 'none';
document.getElementById('RectangleInput2').style.display = 'none';
document.getElementById('RectangleInput3').style.display = 'none';
document.getElementById('Rectangle-container1').style.display = 'none';
document.getElementById('Rectangle-container2').style.display = 'none';
document.getElementById('Rectangle-container3').style.display = 'none';
document.getElementById('OvalInput1').style.display = 'none';
document.getElementById('OvalInput2').style.display = 'none';
document.getElementById('OvalInput3').style.display = 'none';
document.getElementById('oval-container1').style.display = 'none';
document.getElementById('oval-container2').style.display = 'none';
document.getElementById('oval-container3').style.display = 'none';
document.getElementById('RoundInput1').style.display = 'block';
document.getElementById('RoundInput2').style.display = 'block';
document.getElementById('round-container1').style.display = 'block';
document.getElementById('round-container2').style.display = 'block';
document.getElementById('OblongInput1').style.display = 'none';
document.getElementById('OblongInput2').style.display = 'none';
document.getElementById('OblongInput3').style.display = 'none';
document.getElementById('oblong-container1').style.display = 'none';
document.getElementById('oblong-container2').style.display = 'none';
document.getElementById('oblong-container3').style.display = 'none';
} 
elseif (document.getElementById('OblongCheck').checked) {
document.getElementById('RectangleInput1').style.display = 'none';
document.getElementById('RectangleInput2').style.display = 'none';
document.getElementById('RectangleInput3').style.display = 'none';
document.getElementById('Rectangle-container1').style.display = 'none';
document.getElementById('Rectangle-container2').style.display = 'none';
document.getElementById('Rectangle-container3').style.display = 'none';
document.getElementById('OvalInput1').style.display = 'none';
document.getElementById('OvalInput2').style.display = 'none';
document.getElementById('OvalInput3').style.display = 'none';
document.getElementById('oval-container1').style.display = 'none';
document.getElementById('oval-container2').style.display = 'none';
document.getElementById('oval-container3').style.display = 'none';
document.getElementById('RoundInput1').style.display = 'none';
document.getElementById('RoundInput2').style.display = 'none';
document.getElementById('round-container1').style.display = 'none';
document.getElementById('round-container2').style.display = 'none';
document.getElementById('OblongInput1').style.display = 'block';
document.getElementById('OblongInput2').style.display = 'block';
document.getElementById('OblongInput3').style.display = 'block';
document.getElementById('oblong-container1').style.display = 'block';
document.getElementById('oblong-container2').style.display = 'block';
document.getElementById('oblong-container3').style.display = 'block';
}
}
</script>

最后输入框和标签生效:

<label class="calc-form-label" id="rectangle-container1">Length of your pool in feet</label><input type="number" class="tabinput" name="length" min="1" id="RectangleInput1">

<label class="calc-form-label" id="rectangle-container2">Width of your pool in feet</label><input type="number" class="tabinput" name="width" min="1" id="RectangleInput2">

<label class="calc-form-label" id="rectangle-container3">Depth of your pool in feet</label><input type="number" class="tabinput" name="depth" min="1" id="RectangleInput3">

<label class="calc-form-label" id="oval-container1">Half the length of your pool in feet</label><input type="number" class="tabinput" name="half-length" min="1" id="OvalInput1">

<label class="calc-form-label" id="oval-container2">Half the width of your pool in feet</label><input type="number" class="tabinput" name="half-width" min="1" id="OvalInput2">

<label class="calc-form-label" id="oval-container3">Depth of your pool in feet</label><input type="number" class="tabinput" name="oval-depth" min="1" id="OvalInput3">

<label class="calc-form-label" id="round-container1">Radius of your pool in feet</label><input type="number" class="tabinput" name="round-radius" min="1" id="RoundInput1">

<label class="calc-form-label" id="round-container2">Depth of your pool in feet</label><input type="number" class="tabinput" name="round-depth" min="1" id="RoundInput2">

<label class="calc-form-label" id="oblong-container1">Small diameter of your pool in feet</label><input type="number" class="tabinput" name="small-diameter" min="1" id="OblongInput1">

<label class="calc-form-label" id="oblong-container2">Large diameter of your pool in feet</label><input type="number" class="tabinput" name="large-diameter" min="1" id="OblongInput2">

<label class="calc-form-label" id="oblong-container3">Length of your pool in feet</label><input type="number" class="tabinput" name="oblong-length" min="1"  id="OblongleInput3">

Answer 1

HTML id 必须是唯一的!

所以我将 id="rectangle-container"更改为 id="rectangle-container1"和 id="rectangle-container2"等等。

您可以将所有相应的标签和输入放在一个 div 或其他东西中，然后隐藏和显示该 div。

<div id='myUniqueIdForRectangle'>
    <label class="calc-form-label" id="rectangle-container1">Length of your pool in feet</label>
    <input type="number" class="tabinput" name="length" min="1" onclick="javascript:yesnoCheck();" id="RectangleInput1">
    <label class="calc-form-label" id="rectangle-container2">Width of your pool in feet</label>
    <input type="number" class="tabinput" name="width" min="1" onclick="javascript:yesnoCheck();" id="RectangleInput2">
    <label class="calc-form-label" id="rectangle-container3">Depth of your pool in feet</label>
    <input type="number" class="tabinput" name="depth" min="1" onclick="javascript:yesnoCheck();" id="RectangleInput3">
</div>


function yesnoCheck() {
    if (document.getElementById('RectangleCheck').checked) {
        document.getElementById('myUniqueIdForRectangle').style.display = 'block';
        document.getElementById('myUniqueIdForRectangleForOval').style.display = 'none';
        ....
    }
    ....
}