Question

我正在尝试使用引导程序中的单选按钮创建一个表单，这样每当切换一个单选按钮时，随后会出现一个带有新字段的不同表单：

<tr>
 <td><label for="exampleInputEmail3" class="input-group">1 or 2 ? </label></td>

       <td>
         <select id="whatever" name="whatever" class="input-group">

         <input type="radio" name="radioName" value="1" />one<br />
         <input type="radio" name="radioName" value="2" />two<br />>
         </select>
      </td> 
</tr>

如果用户选择选项1，则需要在其下方显示表单1，否则需要显示2表单。

表单1如下所示：

<tr id="whatever_description">
<td><label for="exampleInputEmail3" class="control-label">1</label></td>
</tr>

表单2看起来与不同的标签完全相同：

<tr id="whatever_description">
<td><label for="exampleInputEmail3" class="control-label">2</label></td>
</tr>

Answer 1

您可以使用Jquery轻松完成此任务首先，您可以使用.val()函数获取您选中的单选按钮的值然后，您可以使用hide/show函数显示正确的表单并隐藏另一个我希望这会帮助你。

Answer 2

首先，您的表格行需要不同的ID。两个元素不能共享相同的ID。您可以使用change函数侦听更改，然后使用逗号抓取多个选择器，然后分别使用toggle

显示/隐藏每个行，从而切换两行的可见性

$('input[name="radioName"]').change(function () {
    $("#whatever_description1, #whatever_description2").toggle();
});

Here's a demo in fiddle

如果您想要更多控制权，请参阅get value from radio group using jquery

切换单选按钮选项时执行操作

2 个答案:

Here's a demo in fiddle