Question

I have a form that the user can save and return to edit. I have questions on the form that toggle a div (class = "details) with additional questions based on the user’s answer to the previous question. There are multiple of these question types.

I’d like the answers of the sub-questions within the details div to clear if the user selects ‘no’ (when the sub-questions are toggled to hidden). How would I implement that into my existing code?

Example: http://jsfiddle.net/XVtB8/1

jQuery:

$('.toggle').on('change',function(){

    var showOrHide = false;

    $(this).siblings('input[type=radio]').andSelf().each(function() {
        if ($(this).val() == 1 && $(this).prop("checked")) showOrHide = true;
    })    

    $(this).parent().next('#details').toggle(showOrHide);

}).change()  

HTML:

<div>
    <label>Select #1:</label>
    <input type="radio" name="radio1" class="toggle" value="0">No    
    <input type="radio" name="radio1" class="toggle" value="1" checked="checked">Yes
</div>
<div id="details">
   <input type="text" value="123"><br>
   <input type="text" value="456">
</div>

<br>

<div>
    <label>Select #2:</label>
    <input type="radio" name="radio2" class="toggle" value="0">No    
    <input type="radio" name="radio2" class="toggle" value="1" checked="checked">Yes
</div>
<div id="details">
   <input type="text" value="789"><br>
   <input type="text" value="098">
</div>

<br>

<div>
    <label>Select #3:</label>
    <input type="radio" name="radio3" class="toggle" value="0" checked="checked">No    
    <input type="radio" name="radio3" class="toggle" value="1">Yes
</div>
<div id="details">
   <input type="text"><br>
   <input type="text">
</div>

<br>

<div>
    <label>Select #3:</label>
    <input type="radio" name="radio4" class="toggle" value="0">No    
    <input type="radio" name="radio4" class="toggle" value="1">Yes
</div>
<div id="details">
      <input type="text"><br>
      <input type="text">
</div>

Answer 1

You can try something like this:

$('.toggle').on('change',function(){

var showOrHide = false;

$(this).siblings('input[type=radio]').andSelf().each(function() {
    if ($(this).val() == 1 && $(this).prop("checked")) showOrHide = true;
})    

$(this).parent().next('#details').toggle(showOrHide);

if (showOrHide==false){
    $(this).parent().next('#details').find('input[type=text]').val('');
    $(this).parent().next('#details').find('input:checkbox').removeAttr('checked');

    // other fields type to clear   

} }).change() 

here is un updated fiddle : http://jsfiddle.net/XVtB8/2/