Question

我想要一系列是/否问题，＆amp;根据RADIO BUTTON，答案/文字显示在相应的DIV上。

我找到了一个答案 - here，这就是我所追求的目标。

我的问题是，改变这个是多么容易，所以我可以拥有多套单选按钮。

即

      <input type="radio" name="type" value="tuser1" id="tuser1" /> (question 1)
      <input type="radio" name="type" value="tuser2" id="tuser2" /> (question 2)
      <input type="radio" name="type" value="tuser3" id="tuser3" /> (question 3) etc.

是否可以轻松更改功能，接受数字参考＆amp;改变适当的DIV集？

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

PPS：我的最终目标是结合＆＃34; visable＆＃34; divs，进入下面的主div（每个div回复中都有一个空行）。

IE，

Q1（是/否），（显示答案为q1＆＃34;是＆＃34;）/（显示答案为q1＆＃34;否＆＃34;）

主div： -

显示Q1结果。

显示第二季度结果。

显示Q3结果。

等...

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

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

Answer 1

在div中换行您的每个问题集。通过此，您可以轻松地对问题进行分组。您可以使用class和data属性。

试试这段代码，

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>

JS：

$(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();
    });
});

的 SEE THIS FIDDLE DEMO

Answer 2

Demo在这里找到

从单选按钮中删除选中的属性
我已经为称为问题的包装问题添加了父div
将textarea id命名为答案

<强> 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>

添加了一些css

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

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

这是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);
        });

    });
});

更改复选框上的DIV

2 个答案: