Question

我有一个网站，我想要它的形式根据所选的选项动态更改内容。例如，如果在人和动物之间有两个单选按钮可供选择，如果用户选择动物，则表单的其余部分将直接具有动物年龄的输入字段，但如果用户选择人类，则表单的其余部分将是在女性或男性之间有选择的选择。

标记：

<form>
    <input type="radio" name="type">Animal
    <input type="radio" name="type">Human
</form>

如果他选择动物：

<form>
    <input type="radio" name="type">Animal
    <input type="radio" name="type">Human

    <input type="text" name="age_of_animal">
</form>

如果他选择人类：

<form>
    <input type="radio" name="type">Animal
    <input type="radio" name="type">Human

    <select>
        <option>Sex</option>
        <option>Female</option>
        <option>Male</option>
    </select>

我怎样才能做到这一点？

Answer 1

这样的事情？使用.change()查看单选按钮状态是否已更改，然后阅读所选单选按钮的val()。然后使用if语句到show()或hide()各个部分。该解决方案利用classes帮助jquery选择特定元素。

$(document).ready(function() {
    $('input[type=radio]').on('change', function() {
        var radio = $('input[type=radio]:checked').val();
        if (radio == 'animal') {
            $('.animalAge').show();
            $('.gender').hide();
        }
        else if (radio == 'human') {
            $('.animalAge').hide();
            $('.gender').show();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="type" value="animal"/>Animal
<input type="radio" name="type" value="human"/>Human
<br/><br/>
<input class="animalAge" type="text" name="age_of_animal" style="display:none;"/>
<select class="gender" style="display:none;">
    <option>Sex</option>
    <option>Female</option>
    <option>Male</option>
</select>

动态更改表单内容

1 个答案: