带有单选按钮的优雅显示表单内容答案

【问题标题】：Elegant displaying form content with radio buttons带有单选按钮的优雅显示表单内容
【发布时间】：2013-05-01 14:21:38
【问题描述】：

我有一个带有单选按钮（“是”、“否”）的 HTML 表单，并根据按钮的值向上或向下滑动。这是js代码：

$(document).ready(function () {
    $("#first_button_parent").css("display", "none");

    $(".is_first_button").click(function () {
        if ($('input[name=first_button]:checked').val() == "Yes") {
            $("#first_button_parent").slideDown("fast");
        } else {
            $("#first_button_parent").slideUp("fast");
        }
    });
    $("#second_button_parent").css("display", "none");

    $(".is_second_button").click(function () {
        if ($('input[name=second_button]:checked').val() == "Yes") {
            $("#second_button_parent").slideDown("fast");
        } else {
            $("#second_button_parent").slideUp("fast");
        }
    });
});

我想简化这个功能，我的意思是为每个按钮摆脱不同的情况。

这是 jsfiddle 示例：http://jsfiddle.net/afjBA/

【问题讨论】：

单选按钮后面是什么元素有什么特殊要求吗？ EG：有些有文本框，有些有文本区域，等等......
"在单选按钮之后" 您的意思是示例中的“是”和“否”值？没有特殊要求。
您的 HTML 无效。您将 <ol> 元素作为其他 <ol> 元素的直接子元素，将 <input> 元素作为 <ol> 元素的直接子元素。

标签： jquery forms radio-button simplify

【解决方案1】：

这看起来怎么样：-

http://jsfiddle.net/9dbLp/

    $(document).ready(function () {
    $("#first_button_parent, #second_button_parent").css("display", "none");
    $(':radio').on('click',function(){
        var elem = $("ol.formset", $(this).parent());
        if($(this).val() === "Yes" )
            elem.slideDown('slow');
        else
            elem.slideUp('slow');
    });
});

【讨论】：

工作就像一个魅力！谢谢大家。

【解决方案2】：

通过几行代码和一些 css 类，您可以使用任何按钮组合来实现此功能，并允许使用不同的类型/值。我为 showiffield 和 showifvalue 的单选按钮添加了属性，并添加了 css 类。如果需要，您也可以通过脚本来完成并添加动画：

http://jsfiddle.net/afjBA/11/

$(document).ready(function () {
    $(".conditionaltarget").parent().hide();
});

$(".conditional").on('change',function() {
    var btnVal = $(this).val();
    $("[showifkey="+$(this).attr('name')+"]").each(function() {
        if(btnVal==$(this).attr('showifvalue'))
        {
            $(this).parent().show();
        } else {
            $(this).parent().hide();
        }
    });  
});

【讨论】：

【解决方案3】：

这是您的 jQuery 的简化版本，HTML 已清理：

jsFiddle example

jQuery

$('ol.formset input[type=text]:gt(0)').hide();
$('ol.formset input[type=radio]').click(function () {
    if ($(this).val() == 'Yes') $(this).parent('li').next('li').find('input').slideDown("fast");
    if ($(this).val() == 'No') $(this).parent('li').next('li').find('input').slideUp("fast");
});

HTML

<form class="form" method="post">
    <fieldset>
        <ol class="formset">
            <li>
                <label for="id">id</label>
                <input type="text" id="id" name="id" />
            </li>
            <li>
                <label for="first_button">this?</label>
                <input type="radio" name="first_button" value="Yes" class="is_first_button" />Yes
                <input type="radio" name="first_button" value="No" class="is_first_button" />No</li>
            <li>
                <ol id="first_button_parent" class="formset">
                    <li>
                        <input type="text" id="field_a" />
                    </li>
                </ol>
            </li>
            <li>
                <label for="second_button">or maybe this?</label>
                <input type="radio" name="second_button" value="Yes" class="is_second_button" />Yes
                <input type="radio" name="second_button" value="No" class="is_second_button" />No</li>
            <li>
                <ol id="second_button_parent" class="formset">
                    <li>
                        <input type="text" id="field_b" />
                    </li>
                </ol>
            </li>
        </ol>
        <input class="button" type="submit" value="send" />
    </fieldset>
</form>

【讨论】：