Question

我已经阅读了关于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>

编辑，如果选择“是”，则显示2行，如果随后选择“否”，则行需要再次消失，即改变用户的想法。

Answer 1

这是您的代码，我使用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

更新
如果用户改变主意，该演示已更新为删除追加的行

根据选择的单选按钮显示行

1 个答案: