Question

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

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

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

Answer 1

Fiddle Demo

更改

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

和

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

<小时/> 代码的更好和简短版本

Fiddle Demo

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

<小时/> 更短的版本

Fiddle Demo

$(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 )

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

1 个答案: