Toggle radio selection with another radio selection and refresh button not page

Ok I Have a form with some questions as a radio option. If the first radio is selected as option yes, display the second radio option. if second radio option is also selected yes as the option, display third element (text box).

This functionality is working but what I can't get to work is if they change the first radio selection to no how can I hide and unset the second radio option (set option to no) and clear and hide the third element (text box) value.

Here is what I have tried:

$("#second_radio_div").hide("fast");
$("#third_element_div").hide("fast");

$("[name=first_radio]").change(function(){
    $("#second_radio_div").toggle($("[name=first_radio]").index(this)===1);

    if($("[name=first_radio]").index(this)===0) {
        //$('input:radio[name="second_radio_no"]').attr('checked',true); 
        //$('#second_radio').buttonset("refresh");
        //$('[name="second_radio"][value="no"]').attr("checked", true);
        //$('#second_radio').buttonset("refresh");
        $("#third_element_div").hide("fast"); // This works to hide the element
    }
});

$("[name=second_radio]").change(function(){
    $("#third_element_div").toggle($("[name=second_radio]").index(this)===1);
});

The HTML

<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
    <div>First Radio</div>
        <input type="radio" name="first_radio" id="first_radio_yes" value="yes" />
        <label for="first_radio_yes">Yes</label>

        <input type="radio" name="first_radio" id="first_radio_no" value="no" checked="checked"/>
        开发者_如何学编程<label for="first_radio_no">No</label>
    </fieldset>
</div>


<div id="second_radio_div" name="second_radio_div">
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="horizontal">
            <div>Second Radio</div>
            <input type="radio" name="second_radio" id="second_radio_yes" value="yes" />
            <label for="second_radio_yes">Yes</label>

            <input type="radio" name="second_radio" id="second_radio_no" value="no" checked="checked"/>
            <label for="second_radio_no">No</label>
        </fieldset>
    </div>
</div>

<div id="third_element_div" name="third_element_div">
    <div data-role="fieldcontain">
        <input type="text" name="third_element" id="third_element" class="default-value" value="If yes, provide date" />                
    </div>
</div>

---

$("#second_radio_div, #third_element_div").hide();

$("[name=first_radio]").change(function() {
    var show = $(this).val() == "yes";
    $("#second_radio_div").toggle(show);

    if (!show) {
        $('#second_radio_no').attr('checked',true); 
        $("#third_element_div").hide();
    }
});

$("[name=second_radio]").change(function() {
    $("#third_element_div").toggle($(this).val() == "yes");
});

working example: http://jsfiddle.net/hunter/N6qmr/

---

I think the main problem with what you had was this line:

$('input:radio[name="second_radio_no"]').attr('checked',true);

Should have been:

$('#second_radio_no').attr('checked', true);

Since there is no element with [name="second_radio_no"]

---

How about:

$("#second_radio_div").hide("fast");
$("#third_element_div").hide("fast");

$("[name='first_radio']").change(function() {
    $("#second_radio_div").toggle($("[name='first_radio']").index(this) === 0);

    if ($("[name='first_radio']").index(this) === 1) {
        $("#second_radio_no").attr("checked", true);
        $("#third_element_div").hide("fast"); // This works to hide the element
    }
});

$("[name='second_radio']").change(function() {
    $("#third_element_div").toggle($("[name='second_radio']").index(this) === 0);
});

Working here: http://jsfiddle.net/dVAzj/2/

Note that quotes are required around the 'value' in the attribute equals ([name='value']) selector.