i want to have a series of yes/no questions, & depending on the RADIO BUTTON, the answer / text appears on the appropriate DIV.
I have found one answer - here and this does what i am after.
My question is, how easy is it to alter this so I can have MULTIPLE sets of radio buttons.
Ie
<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.
is it easy to alter the function, to accept numeric references & to alter the approriate DIV set ?
PS - i assume i can have text of multiple lines/paragraphs in each DIV.
PPS: my ultimate aim is to combine the "visable" divs, into a master div underneath (with a blank line in each div reply).
IE,
Q1 (yes/no), (show answer to q1 "yes")/(show answer to q1 "no")
master div:-
show Q1 result.
show Q2 result.
show Q3 result.
etc...
i'll put the master div inside a TEXTAREA form - to send to another website for processing - on my server.
i want the master div to preserve any new-lines / formattng of the answers (if the answer is on several lines).
Wrap your each question set in div. By this you can easily group your question. You can use class and data attributes.
Try this code,
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();
});
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments