Javascript 在复选框上更改DIV

我想问一系列是/否问题，根据单选按钮，答案/文本显示在相应的DIV上

我找到了一个答案——这正是我想要的

我的问题是，修改它有多容易，这样我就可以有多套单选按钮

即

（问题1）
（问题2）
（问题3）等。

更改函数、接受数字引用和更改适当的DIV集是否容易

PS-我假设我可以在每个DIV中包含多行/段落的文本

PPS：我的最终目标是将“可视”div组合成下面的主div（每个div回复中都有一个空行）

即

Q1（是/否），（显示对Q1的回答“是”）/（显示对Q1的回答“否”）

主分区：-

显示Q1结果

显示第二季度结果

显示第三季度结果

等等

我将把主div放在我的服务器上的TEXTAREA表单中，发送到另一个网站进行处理

---

我希望主div保留答案的任何新行/格式（如果答案在几行上）。

将每个问题集包装在

div

中。通过这一点，您可以轻松地将问题分组。您可以使用

类

和

数据

属性

试试这个代码

HTML:

<div id="Qset1">
    <input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type" checked />
    <input type="radio" name="type" data-id="No" value="tuser" id="tuser" />
    <div id='optuser' class="yes">//some input fields1</div>
    <div id='optdeliverer' class="no">//some other input fields1</div>
</div>
<div id="Qset2">
    <input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type2" checked />
    <input type="radio" name="type2" data-id="No" value="tuser" id="tuser" />
    <div id='optuser' class="yes">//some input fields2</div>
    <div id='optdeliverer' class="no">//some other input fields2</div>
</div>
<div id="Qset3">
    <input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type3" checked />
    <input type="radio" name="type3" data-id="No" value="tuser" id="tuser" />
    <div id='optuser' class="yes">//some input fields3</div>
    <div id='optdeliverer' class="no">//some other input fields3</div>
</div>

$(document).ready(function () {
    $('input[type=radio]').change(function () {
        if ($(this).attr('data-id', 'yes').is(':checked')) $(this).closest('div').find('.yes').toggle();
        if ($(this).attr('data-id', 'no').is(':checked')) $(this).closest('div').find('.no').toggle();
    });
});

在这里找到

从单选按钮中删除选中的属性

我已经为名为“问题”的包装问题添加了父div

命名textareaid作为答案

HTML

<div id="questions">
<div id="Qset1">Question number 1
    <input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type"  />Yes
    <input type="radio" name="type" data-id="No" value="tuser" id="tuser" />No
   </div>
<div id="Qset2">Question number 2
    <input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type2"  />Yes
    <input type="radio" name="type2" data-id="No" value="tuser" id="tuser" />No
</div>
<div id="Qset3">Question number 3
    <input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type3"  />Yes
    <input type="radio" name="type3" data-id="No" value="tuser" id="tuser" />No
</div>
</div>

<textarea id="answers"></textarea>

这是Jquery

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
$(document).ready(function () {
    $('input[type=radio]').click(function () {

        var ans="";
        $('input[type=radio]').each(function(){

            if($(this).attr("checked"))
               {
              var question=$(this).parent().contents().get(0).nodeValue;
               ans=ans + question + $(this).val() + "\r" ;

                }

               $("#answers").html(ans);
        });

    });
});

$（文档）.ready（函数（）{
$（'input[type=radio]'）。单击（函数（）{
var ans=“”；
$（'input[type=radio]'）。每个（函数（）{
if（$（this.attr（“选中”））
{
var question=$（this.parent（）.contents（）.get（0.nodeValue）；
ans=ans+QUEST+$（this）.val（）+“\r”；
}
$（“#答案”）.html（ans）；
});
});
});

我不太明白。因此，每个问题都有一个是/否单选按钮。是吗？是的-我见过一个问题（两个或更多答案）的例子。但是，我找不到多个问题的例子（更改第二个答案不会更改问题1的答案）。如果我有15、20个或更多问题，我不会想要15、20个不同的功能（每组问题/答案一个）。我正在寻找一种方法，可以有多组问题（&div），但只有一个函数。@sarah我在下面发布了我的答案。。。如果您需要任何附加功能，请告诉我。谢谢。非常有效我甚至保留了断线-#optdeliver{display:none；whitespace:pre；}Ps，我发现了一个错误，但这不是什么大问题。（单击“否”选项2-3-4次。每次单击时文本仍会更改-不取决于您单击的选项。没什么大不了的-我可以接受它并使用代码。@sarah使用

change

事件侦听器而不是

click

事件侦听器。我更新了我的答案。感谢修复。

#questions,#answers{
    width:200px;
    display: inline-block;
    vertical-align: top;
}

#answers{
    border:1px soied #000;
    height:200px;
    width:300px;
}

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
$(document).ready(function () {
    $('input[type=radio]').click(function () {

        var ans="";
        $('input[type=radio]').each(function(){

            if($(this).attr("checked"))
               {
              var question=$(this).parent().contents().get(0).nodeValue;
               ans=ans + question + $(this).val() + "\r" ;

                }

               $("#answers").html(ans);
        });

    });
});