首页 文章

如果选中单选按钮，则切换表单字段的可见性

提问于
浏览 次
1

我最初试图隐藏一组表单字段 . 然后，如果选择了单选按钮，则显示该组字段 . 然后，如果取消选择该无线电，则再次隐藏它们 .

前两个工作正常（最初隐藏字段，如果选择了无线电则显示它们） . 但是当取消选择无线电时，我无法让他们再次隐藏 . 我确定我错过了一些明显的东西，但我无法弄清楚它是什么 .

http://jsfiddle.net/C5PMy/

$(document).ready(function() {

toggleFields(); //call this first so we start out with the correct visibility depending on the selected form values

    //Hide the fields initially
    $("#bsd-field-custom-105966-group").hide();
    $("#bsd-field-custom-105967-group").hide();
    $("#bsd-field-custom-105968-group").hide();
    $("#bsd-field-custom-105978").hide();
    $("#bsd-field-custom-105969-group").hide();
    $("#bsd-field-custom-105970").hide();
    $("#bsd-field-custom-105979").hide();
    $("#bsd-field-custom-105971-group").hide();
    $("#bsd-field-custom-105972").hide(); 


//Show the fields only if lodging is required
       $("#custom-105965_0").change(function () {
    toggleFields();
});


});
//this toggles the visibility of the other lodging fields depending on the current     selected value of the "lodging required" field
function toggleFields() {
if ($(("#custom-105965_0").checked)) {

    $("#bsd-field-custom-105966-group").show();
    $("#bsd-field-custom-105967-group").show();
    $("#bsd-field-custom-105968-group").show();
    $("#bsd-field-custom-105978").show();
    $("#bsd-field-custom-105969-group").show();
    $("#bsd-field-custom-105970").show();
    $("#bsd-field-custom-105979").show();
    $("#bsd-field-custom-105971-group").show();
    $("#bsd-field-custom-105972").show();
            }

            else  {
    $("#bsd-field-custom-105966-group").hide();
    $("#bsd-field-custom-105967-group").hide();
    $("#bsd-field-custom-105968-group").hide();
    $("#bsd-field-custom-105978").hide();
    $("#bsd-field-custom-105969-group").hide();
    $("#bsd-field-custom-105970").hide();
    $("#bsd-field-custom-105979").hide();
    $("#bsd-field-custom-105971-group").hide();
    $("#bsd-field-custom-105972").hide();
            }
    }
jquery radio-button toggle

1 回答

  • 5

    小提琴演示

    更改

    function toggleFields() {
    if ($("#custom-105965_0").is(':checked')) {

    和

    $(".custom-105965").change(function () {//assign change handler to both radio buttons
        toggleFields();
});

    代码的优缺点版本

    小提琴演示

    $(document).ready(function () {
    $("[id^=bsd-field-custom-1059]").hide();
    $(".custom-105965").change(function () {
        if (this.value == 'Yes') {
            $("[id^=bsd-field-custom-1059]").show();
        } else {
            $("[id^=bsd-field-custom-1059]").hide();
        }
    });
});

    更短的版本

    小提琴演示

    $(document).ready(function () {
    $("[id^=bsd-field-custom-1059]").hide();//hide all
    $(".custom-105965").change(function () {//change event on radio button
        $("[id^=bsd-field-custom-1059]").toggle(this.value == 'Yes'); //if selected radio button has value yes than return true i.e show else false i.e hide
    });
});

    Attribute Starts With Selector [name^="value"]

    .toggle( showOrHide )

    回复于

相关问题