动态更改表格内容

-2

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

标记：

<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>

我怎么能做到这一点吗？

来源

2015-02-10 Blaise M.

欢迎计算器。请告诉我们你到目前为止的情况。 SO不是代码编写服务，如果您提供了自己的工作证据，您将得到更好的回应。请参阅[帮助页面]（http://stackoverflow.com/help）。 – freefaller 2015-02-10 17:56:28

这样的事情？使用.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>

来源

2015-02-10 18:07:35 indubitablee

好逻辑。完美工作。 – 2015-02-10 18:13:18

动态更改表格内容

回答

相关问题