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

时间：2018-01-24 11:45:22

标签： javascript html input hide display

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

1 个答案:

答案 0 :(得分：1)

HTML ID必须是唯一的！

所以我改变了id =＆＃34;矩形容器＆＃34;到id =＆＃34; rectangle-container1＆＃34;和id =＆＃34; rectangle-container2＆＃34;等等。

您可以将所有相应的标签和输入放在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';
        ....
    }
    ....
}
相关问题
最新问题