Question

我有一个带有单选按钮的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/

Answer 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');
    });
});

Answer 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();
        }
    });  
});

Answer 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>

优雅的显示形式内容与单选按钮

3 个答案: