顯示行取決於單選按鈕被選中

我已經通過了一些關於stackoverflow的類似問題的解讀，但是對於如何修改它以適應我的特殊情況有點遺憾。我希望在html中輸出2行，具體取決於所選的單選按鈕。我仍在學習JavaScript ...顯示行取決於單選按鈕被選中

我在想什麼？以及如何獲得HTML直接在單選按鈕表單項後輸出？

我的表單看起來像這樣;

<tr> 
    <td>Select your option</td> 
    <td><input type="radio" name="your_store" id="store_yes" value="1" onclick = "addrow()" /> 
    <?php echo $text_yes; ?> 
    <input type="radio" name="your_store" id="store_no" value="0" onclick = "addrow()" /> 
    <?php echo $text_no; ?></td> 
</tr>

在此之後我也有其他幾個樣式的項目

在窗體的底部我有功能;

<script type="text/javascript"><!-- 
function addrow() { 
    if(document.getElementById('store_yes').checked) { 
    html = '<tr>'; 
    html = '<td>Row is showing this</td> '; 
    html = '</tr>'; 
    } else { 
    html = '<tr>'; 
    html = '<td>Row is showing something else</td> '; 
    html = '</tr>'; 
    } 
//--></script>

EDIT，如果YES選擇2行出現，這些行需要的，如果NO，然後隨後選擇，即用戶頭腦變化再次dissapear。

來源

2012-11-02 Mark

你不能你'input'元素後追加一個'tr'元素，除非你想有效的HTML（和你），以去除附加行，因爲你會在表格單元格中有表格行。你想要準確添加什麼？ – MarioDS

@Mario我想在單選按鈕後添加2個表單域。如果按鈕設置爲yes，則顯示額外字段，如果設置爲no，則它們是具有設置值的隱藏表單項。 – Mark

@Mark很少有其他的做法。您不必動態添加元素。您可以更改特定事件上元素的CSS顯示屬性。 –

這是您的代碼，我用Jquery將行添加到表的末尾。閱讀更多about .append() in jquery here。

的修飾的功能：

function addrow() { 
    if (document.getElementById('store_yes').checked) { 
     $('#yourTable').append('<tr><td>Row is showing this</td></tr>'); 
    } else { 
     $('#yourTable').append('<tr><td>Row is showing something else</td></tr>'); 
    } 
}

修飾的HTML

<table border="1" id="yourTable"><tr> 
    <td>Select your option</td> 
    <td><input type="radio" name="your_store" id="store_yes" value="1" onclick = "addrow()" /> 
    <input type="radio" name="your_store" id="store_no" value="0" onclick = "addrow()" /> 
    </td> 
</tr> 
</table>

Check out the demo here

更新
演示已經更新，如果用戶改變了主意

來源

2012-11-02 01:31:47

@awahm，謝謝，但是如果用戶改變主意，按收音機會一次又一次地追加另一行。追加另一個表之前是否可以將表重置爲原始表？ – Mark

是的，可能的話，你可以檢查一行是否已經被添加過，如果是這樣的話就刪除該行。你可以在這個函數被調用的時候做。 [這是一個更新的函數]（http://jsfiddle.net/cULH3/6/）。做一些谷歌搜索，有很多幫助;）乾杯！ –

顯示行取決於單選按鈕被選中

回答

相關問題