Переключение выбора радио с другим выбором радио и кнопка обновления, а не страница - PullRequest
Новая
       24

Переключение выбора радио с другим выбором радио и кнопка обновления, а не страница

1 голос
/ 07 марта 2011

Хорошо, у меня есть форма с некоторыми вопросами в качестве опции радио.Если в качестве опции выбрано первое радио, отобразите второе радио.если вторая опция радио также выбрана в качестве опции да, отобразить третий элемент (текстовое поле).

Эта функция работает, но что я не могу заставить работать, так это если они изменят первый выбор радио на «нет», как я могу скрыть и отменить второй параметр радио (установите параметр «нет»), а также очистить и скрытьзначение третьего элемента (текстовое поле).

Вот что я пробовал: 

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

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>

Ответы [ 2 ]

1 голос
/ 07 марта 2011

Как насчет: 

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

Работает здесь: http://jsfiddle.net/dVAzj/2/

Обратите внимание, что кавычки необходимы вокруг значения 'value' в атрибуте , равном ([name='value']).

1 голос
/ 07 марта 2011 
$("#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");
});

рабочий пример: http://jsfiddle.net/hunter/N6qmr/

Я думаю, что главной проблемой с тем, что у вас было, была эта строка: 

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

Должно было быть: 

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

Поскольку нет элемента с [name="second_radio_no"]

...