用另一个无线电选择和刷新按钮而不是页面切换无线电选择答案

【问题标题】：Toggle radio selection with another radio selection and refresh button not page用另一个无线电选择和刷新按钮而不是页面切换无线电选择
【发布时间】：2011-07-10 12:18:10
【问题描述】：

好的，我有一个带有一些问题的表单作为单选选项。如果第一个单选被选为选项是，则显示第二个单选选项。如果还选择了第二个单选选项是作为选项，则显示第三个元素（文本框）。

此功能正在运行，但我无法使用的是，如果他们将第一个单选选项更改为 no，我如何隐藏和取消设置第二个单选选项（将选项设置为 no）并清除和隐藏第三个元素（文本框）值。

这是我尝试过的：

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

【问题讨论】：

标签： jquery jquery-ui radio-button toggle jquery-mobile

【解决方案1】：

$("#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"]的元素

【讨论】：

嗯，这就是我已经在工作的内容，我想向后工作，就像他们取消选择第二个单选选项（或选择否）以隐藏和清除第三个元素文本框的值.如果他们在第一个收音机上取消选择（或选择否）我想隐藏并清除第三个元素文本框的值并在第二个收音机上选择否并将其隐藏
我的选择器基于复选框的值而不是索引。感觉好多了
我真的很喜欢这种方法，只是有一个奇怪的问题。选择选项是（在警报（）中）时，它会显示值NO和选择时相对，它显示值是。我在 $(document).ready(function() 的形式中有它，但我真的不认为这是问题。我也在使用 jQueryMobile 框架。关于为什么我得到以前的值而不是改变的任何想法价值？
那个 def 看起来很奇怪。可以发到 jsfiddle 吗？
好吧，我根据您发布的内容重写了所有切换功能，因为我喜欢您使用的方法（非常感谢），这是我在页面上运行的唯一其他 JS：stackoverflow.com/questions/5225110/…

【解决方案2】：

怎么样：

$("#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/

请注意，attribute equals ([name='value']) 选择器中的“值”周围需要引号。

【讨论】：