根据选中的单选按钮展开和折叠手风琴

Posted 2023-05-08

【中文标题】根据选中的单选按钮展开和折叠手风琴

【英文标题】：Expand and collapse accordion based on checked radio button

【发布时间】：2016-07-02 20:28:12

【问题描述】：

我想根据上面按钮组中的选中值打开或关闭 Accordion 上的选项卡。

在我的应用程序中，每次我选择单选按钮时都会重新加载页面。

例如：如果我选择 1，那么 Collapsible Group #1 将打开，如果我选择单选按钮 #2，那么 Collapsible Group Item #2 将打开。

$(document).ready(function () 
    $("input[name='inlineRadioOptions']").click(function () 
        var checkedValue = $("input[name='inlineRadioOptions']:checked").val();
        console.log(checkedValue);
        if (checkedValue == "option1") 
            $("#collapseOne").collapse('show');
            $("#collapseTwo").collapse('hide');
         else if (checkedValue == "option2") 
            $("#collapseOne").collapse('hide');
            $("#collapseTwo").collapse('show');

         else 
            console.log("Oops.");
        
    );
);

This is my jsfiddle

【参考方案1】：

您在小提琴中的 JS 与您在问题中所说的不符。您需要将else if 中的graduate 更改为option2： https://jsfiddle.net/z49fxn6q/

$(document).ready(function () 

    $("input[name='inlineRadioOptions']").click(function () 
        var checkedValue = $("input[name='inlineRadioOptions']:checked").val();
        console.log(checkedValue);
        if (checkedValue == "option1") 
            $("#collapseOne").collapse('show');
            $("#collapseTwo").collapse('hide');
         else if (checkedValue == "option2") 
            $("#collapseOne").collapse('hide');
            $("#collapseTwo").collapse('show');

         else 
            console.log("Oops.");
        
    );
);