Question

我还在学习javascript而且我已经陷入了死胡同。

所以，这就是我想要实现的目标：我有3个选项 - 排版，螺旋和unryu纸。

 <fieldset>
        <legend id="type">Book type:</legend>
        <input type="radio" name="books" id="book1" value="book1" onchange="updateTotal()">1.Tipography
        <br>
        <input type="radio" name="books" id="book2" value="book2" onchange="updateTotal()">2.With spiral
        <br>
        <input type="radio" name="books" id="book3" value="book3" onchange="updateTotal()">3.With unryu paper
        <br>
    </fieldset>

选择排版时 - 我想显示此选项：

        <fieldset>
        <legend id="tipcolor">1.Choose tipography book color:</legend>
        <input type="radio" name="color" id="color1" value="color1" onchange="updateTotal()">green
        <br>
        <input type="radio" name="color" id="color2" value="color2" onchange="updateTotal()">orange
        <br>
        </fieldset>

隐藏所有其他人，除了送货（必须始终可见）。

其他选项相同 - 选择使用螺旋时 - 显示此选项：

        <fieldset>
        <label id="color" class="hidden">2.Chooes spiral book color:</label>
        <input type="radio" name="color" id="color3" value="color3" onchange="updateTotal()">green
        <br>
        <input type="radio" name="color" id="color4" value="color4" onchange="updateTotal()">blue
        <br>
        <input type="radio" name="color" id="color5" value="color5" onchange="updateTotal()">orange
        <br>
        <input type="radio" name="color" id="color6" value="color6" onchange="updateTotal()">pink
        <br>
        <input type="radio" name="color" id="color7" value="color7" onchange="updateTotal()">other
        <input type="text" name "color">
        <br>
        </fieldset>

隐藏所有其他人，除了送货。

以下是jsfiddle - http://jsfiddle.net/simonapruse/Xdvem/

的看法

任何人都可以提供建议吗？

Answer 1

您可以尝试这样的事情：

  function hideOthers(selectedValue) {
        var tipography = document.getElementById('tipography'),
            spiral = document.getElementById('spiral');
        if(selectedValue === 'book1') {
            spiral.style.display = 'none';
            tipography.style.display = 'block';
        } else if(selectedValue === 'book2') {
            spiral.style.display = 'block';
            tipography.style.display = 'none';
        }
  }

请参阅fiddle

Answer 2

您可以在第一个字段集上添加onchange事件，并将id添加到要隐藏的字段集中

<fieldset onchange="RadioChanged()">
    <legend id="type">Book type:</legend>
    <input type="radio" name="books" id="book1" value="book1" onchange="updateTotal()">1.Tipography
    <br>
    <input type="radio" name="books" id="book2" value="book2" onchange="updateTotal()">2.With spiral
    <br>
    <input type="radio" name="books" id="book3" value="book3" onchange="updateTotal()">3.With unryu paper
    <br>
</fieldset>
<fieldset id='book1Field'>
    <legend id="tipcolor">1.Choose tipography book color:</legend>
    <input type="radio" name="color" id="color1" value="color1" onchange="updateTotal()">green
    <br>
    <input type="radio" name="color" id="color2" value="color2" onchange="updateTotal()">orange
    <br>
</fieldset>
<fieldset id='book2Field'>
    <label id="color" class="hidden">2.Chooes spiral book color:</label>
    <input type="radio" name="color" id="color3" value="color3" onchange="updateTotal()">green
    <br>
    <input type="radio" name="color" id="color4" value="color4" onchange="updateTotal()">blue
    <br>
    <input type="radio" name="color" id="color5" value="color5" onchange="updateTotal()">orange
    <br>
    <input type="radio" name="color" id="color6" value="color6" onchange="updateTotal()">pink
    <br>
    <input type="radio" name="color" id="color7" value="color7" onchange="updateTotal()">other
    <input type="text" name "color">
    <br>
    </fieldset>

然后在javascript中

function RadioChanged()
{
 if(document.getElementById('book1').checked)
 {
    document.getElementById('book2Field').style.display='none';
    document.getElementById('book1Field').style.display='initial';
 }
 else if(document.getElementById('book2').checked)
 {
    document.getElementById('book1Field').style.display='none';
    document.getElementById('book2Field').style.display='initial';
 }
}

Answer 3

您需要编写一个类似于 - OnBookType_Click。
并将其与Book Type复选框的onClick事件处理程序相关联。
为您的所有字段集提供Id属性。
在JS函数中，检查所选复选框的id或值，因此可以通过ID访问相应的字段集使其可见。并使所有其他字段集隐形。

根据选定的单选按钮js显示/隐藏文本

3 个答案: