動態更改表格內容

-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

動態更改表格內容

回答

相關問題