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

我只希望根据选择的单选按钮显示某些标签和输入框。（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>

函数yesnoCheck（）{
if（document.getElementById（'RectangleCheck'）。选中）{
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'）。选中）{
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'）。选中）{
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'）。选中）{
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.d
<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">

<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';
        ....
    }
    ....
}