Javascript 使用jQuery为单选按钮表单创建解释框

我将在下面使用一个简化的版本，但我试图用简单的是/否问题构建一个表单。如果答案是否定的，则不需要解释。如果回答是“是”，则插入一个新的表行，并显示textarea，要求对该特定问题进行解释

需要注意的是，我使用来确保检查了值，并计划在最后为每个字段实现所需的依赖函数

我的表格：

---

看起来您只是在检查初始DOM加载。您需要勾选单击事件，以便框在单击时显示/消失。我会添加一个包含每个注释框的隐藏tr行，然后根据需要显示或隐藏。大概是这样的：

$('input:radio').click(function() {
    $commentTr = $(this).closest('tr').next();
    if ($(this).val() == 'Yes')  {
        $commentTr.hide();
    }
    else {
        $commentTr.show();
    }
});

仔细检查后，我认为检查“是”的值不太有效。我建议使用带有“for”属性的HTML标签标签，并填充每个输入的唯一ID

<input type="radio" name="q1" id="yes1"><label for="yes1">Yes</label>

是

然后你可以开一张支票，比如：

---

$（'label[for=“”+id+””）].html（）='Yes'

看起来您只是在检查初始DOM加载。您需要对单击事件进行检查，以便您的框在单击时显示/消失。我会添加一个包含每个注释框的隐藏tr行，然后根据需要显示或隐藏。类似以下内容：

$('input:radio').click(function() {
    $commentTr = $(this).closest('tr').next();
    if ($(this).val() == 'Yes')  {
        $commentTr.hide();
    }
    else {
        $commentTr.show();
    }
});

仔细检查一下，我认为检查“Yes”的值不太有效。我建议使用带有“for”属性的HTML标签标签，并填充每个输入的唯一ID

<input type="radio" name="q1" id="yes1"><label for="yes1">Yes</label>

是

然后你可以开一张支票，比如：

---

$（'label[for=“”+id+””].html（）=“是的”/p> > p>我已经设置了一个我认为你正在寻找的。

我已经设置了一个我认为你正在寻找的东西。

在当前的解决方案中有两件事需要考虑。首先，正如dMnimal37提到的，你只是在页面上运行这个。你希望解释框显示/隐藏每个单选按钮的值都会改变。其次，有一种内置的方法来区分“是”和“否”。只需给输入元素

value

属性。为了解决这些问题，我建议如下（我忽略了验证部分，您可以在这个JSFIDLE中看到它的作用：）：

//Javascript
$（'input[value=“1”]”）。更改（函数（）{
var explainId=$（this.attr（'name'）+'explain'；
$（this）.closest（'tr'）。之后（'请在下面解释：
'）；
});
$（'input[value=“0”]”）。更改（函数（）{
var explainId=$（this.attr（'name'）+'explain'；
$（this）.closest（'tr'）.next（'tr#'+explainId）.remove（）；
});

你是男人吗？
对
不
你有头发吗？
对
不
你有孩子吗？
对
不
在当前的解决方案中，有两件事需要考虑。首先，正如Dimial37提到的，您只在页面加载时运行此操作。当每个单选按钮的值发生变化时，您希望解释框显示/隐藏。第二，有一种内置的方法来区分“是”和“否”。为输入元素提供
value
属性。为了解决这些问题，我提出以下建议（我忽略了验证部分，您可以在这个JSFIDLE中看到它的作用：）：


//Javascript
$（'input[value=“1”]”）。更改（函数（）{
var explainId=$（this.attr（'name'）+'explain'；
$（this）.closest（'tr'）。之后（'请在下面解释：
'）；
});
$（'input[value=“0”]”）。更改（函数（）{
var explainId=$（this.attr（'name'）+'explain'；
$（this）.closest（'tr'）.next（'tr#'+explainId）.remove（）；
});


你是男人吗？
对
不
你有头发吗？
对
不
你有孩子吗？
对
不
谢谢你的回答（还有喜剧）。我正在测试这两种方法，并试图确定我是喜欢实现您拥有的隐藏方法，还是只是根据需要通过javascript应用，但这似乎确实起到了我需要的作用。因此，在您的答案中将答案改回“否”不会删除实际字段。我将继续使用它，并可能最终结合谢谢你的回答（还有喜剧）。我正在测试这两种方法，并试图确定我是喜欢实现您拥有的隐藏方法，还是只是根据需要通过javascript应用，但这似乎确实起到了我需要的作用。因此，在您的答案中将答案改回“否”不会删除实际字段。我将继续使用它，并可能最终结合swers.good point on firing only only on DOM load.我实际上只是为了演示目的而快速键入，但仍然有效。good point on firing only on DOM load.我实际上只是为了演示目的而快速键入，但仍然有效。然而，我面临的唯一问题是根据需要为textareas创建唯一的名称/ID.我相信上面的脚本可以修改，因为我打算在这里很快看到。值属性的优点很好。我应该想到这一点！但是用语义HTML标记标签，使它们也可以点击，这仍然没有坏处。然而，我面临的唯一问题是根据需要为文本区域创建唯一的名称/ID。我相信上面的脚本可以修改，因为我打算在这里很快看到。value属性很好。我应该想到这一点！但是用语义HTML标记标签，使它们也可以单击，仍然没有什么坏处。
<input type="radio" name="q1" id="yes1"><label for="yes1">Yes</label>


        // The Javascript
        $('input[value="1"]').change(function () {
            var explainId = $(this).attr('name') + 'explain';
            $(this).closest('tr').after('<tr id="' + explainId + '"><td colspan="2">Please explain below:<br><textarea name="a1" id="a1"></textarea></td></tr>');
        });

        $('input[value="0"]').change(function () {
            var explainId = $(this).attr('name') + 'explain';
            $(this).closest('tr').next('tr#' + explainId).remove();
        });

<!-- The HTML -->
<form name="formtest" action="">
  <table class="background_table">
    <tbody>
    <tr>
      <td>Are you a man?</td>
      <td>
        <input type="radio" name="q1" id="yes1" value="1" />Yes
        <input type="radio" name="q1" id="no1" value="0" />No
      </td>
    </tr>
    <tr>
      <td>Do you have hair?</td>
      <td>
        <input type="radio" name="q2" id="yes2" value="1" />Yes
        <input type="radio" name="q2" id="no2" value="0" />No
      </td>
    </tr>

    <tr>
      <td>Do you have children?</td>
      <td>
        <input type="radio" name="q3" id="yes3" value="1" />Yes
        <input type="radio" name="q3" id="no3" value="0" />No
      </td>
    </tr>
    </tbody>
  </table>

  <input type="submit" />
</form>