0

我有一个带有单选按钮（“是”、“否”）的 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/

4

3 回答 3

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');
    });
});
于 2013-05-01T14:32:11.423 回答
0

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

jsFiddle 示例

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>
于 2013-05-01T14:54:39.220 回答
0

通过几行代码和一些 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();
        }
    });  
});
于 2013-05-01T14:40:14.630 回答