Javascript 在选中或取消选中时，如何使用复选框在选项卡之间切换？

我创建了一个带有两组不同选项卡的复选框，根据复选框是否选中，这些选项卡应显示或隐藏

到目前为止，我有一个复选框，在选中时切换选项卡，但当我 取消选中它；它不会变回来

我可以对代码进行哪些更改以使复选框处于打开或关闭状态，从而切换选项卡？

$('input[name="intervaltype"]').click(function () {
    //jQuery handles UI toggling correctly when we apply "data-target" attributes and call .tab('show') 
    //on the <li> elements' immediate children, e.g the <label> elements:
    $(this).closest('label').tab('show');
});

更新：

body {
    padding: 1em;
}

/* Mimic Bootstrap's .nav-tabs>li(.active)>a 
   when using radio buttons instead of links in tab headers */
.nav-tabs>li>label
{
    display: inline-block;
    padding: 1em;
    margin: 0;
    border: 1px solid transparent;
    cursor: pointer;
}
.nav-tabs>li.active>label
{
    cursor: default;
    border-color: #ddd;
    border-bottom-color: white;
}

HTML:

JS:

$('input[name="intervaltype"]').click(function () {
    //jQuery handles UI toggling correctly when we apply "data-target" attributes and call .tab('show') 
    //on the <li> elements' immediate children, e.g the <label> elements:
    $(this).closest('label').tab('show');
});

$（'input[name=“intervaltype”]”）。单击（函数（）{
//当我们应用“数据目标”属性并调用.tab（'show'）时，jQuery正确地处理UI切换
//在
元素的直接子元素上，例如元素：
$（this）.closest（'label'）.tab（'show'）；
});

评论中已经指出，这确实不是解决问题的方法，但由于您坚持使用复选框和引导选项卡，下面介绍了如何做到这一点：

bootstrap选项卡的工作方式是，应该打开特定选项卡的每个元素都应该是可见的和可单击的，并且具有

数据目标

或

href

属性，这些属性指定单击时应该看到哪个选项卡

为了模仿这种行为，我必须模仿引导显示/隐藏选项卡的方式，并注意显示/隐藏自己的选项卡

代码如下：

$（'input[name=“intervaltype”]”）。单击（函数（）{
tabpanel=$（this）.parents（“[role=tabpanel]”）
tabpanel.find（'.tab-content.tab-pane'）.removeClass（'active'）；
如果（$（this）.is（':checked'））{
tabpanel.find（$（this.data（'tab-checked'））.addClass（'active'）；
}否则{
tabpanel.find（$（this.data（'tab-unchecked'））.addClass（'active'）；
}
});
正文{
填充：1em；
}
/*模拟引导的.nav选项卡>li（.active）>a
使用单选按钮而不是选项卡标题中的链接时*/
.nav选项卡>li>标签
{
显示：内联块；
填充：1em；
保证金：0；
边框：1px实心透明；
光标：指针；
}
.nav选项卡>li.active>标签
{
游标：默认值；
边框颜色：#ddd；
边框底色：白色；
}


习俗

自定义。。。
有规律的
评论中已经指出，这确实不是解决问题的方法，但由于您坚持使用复选框和引导选项卡，下面介绍了如何做到这一点：

bootstrap选项卡的工作方式是，应该打开特定选项卡的每个元素都应该是可见的和可单击的，并且具有
数据目标
或
href
属性，这些属性指定单击时应该看到哪个选项卡

为了模仿这种行为，我必须模仿引导显示/隐藏选项卡的方式，并注意显示/隐藏自己的选项卡

代码如下：


$（'input[name=“intervaltype”]”）。单击（函数（）{
tabpanel=$（this）.parents（“[role=tabpanel]”）
tabpanel.find（'.tab-content.tab-pane'）.removeClass（'active'）；
如果（$（this）.is（':checked'））{
tabpanel.find（$（this.data（'tab-checked'））.addClass（'active'）；
}否则{
tabpanel.find（$（this.data（'tab-unchecked'））.addClass（'active'）；
}
});
正文{
填充：1em；
}
/*模拟引导的.nav选项卡>li（.active）>a
使用单选按钮而不是选项卡标题中的链接时*/
.nav选项卡>li>标签
{
显示：内联块；
填充：1em；
保证金：0；
边框：1px实心透明；
光标：指针；
}
.nav选项卡>li.active>标签
{
游标：默认值；
边框颜色：#ddd；
边框底色：白色；
}


习俗

自定义。。。
有规律的
我认为这就完成了您想要的。它所做的只是在两个类之间传递活动类：


$（'input[name=“intervaltype”]”）。单击（函数（）{
$（'#Custom'）。toggleClass（'active'）；
$（'#Types'）。toggleClass（'active'）；
});
正文{
填充：1em；
}
/*模拟引导的.nav选项卡>li（.active）>a
使用单选按钮而不是选项卡标题中的链接时*/
.nav选项卡>li>标签
{
显示：内联块；
填充：1em；
保证金：0；
边框：1px实心透明；
光标：指针；
}
.nav选项卡>li.active>标签
{
游标：默认值；
边框颜色：#ddd；
边框底色：白色；
}


习俗

自定义。。。
有规律的
我认为这就完成了您想要的。它所做的只是在两个类之间传递活动类：


$（'input[name=“intervaltype”]”）。单击（函数（）{
$（'#Custom'）。toggleClass（'active'）；
$（'#Types'）。toggleClass（'active'）；
});
正文{
填充：1em；
}
/*模拟引导的.nav选项卡>li（.active）>a
使用单选按钮而不是选项卡标题中的链接时*/
.nav选项卡>li>标签
{
显示：内联块；
填充：1em；
保证金：0；
边框：1px实心透明；
光标：指针；
}
.nav选项卡>li.active>标签
{
游标：默认值；
边框颜色：#ddd；
边框底色：白色；
}


习俗

自定义。。。
有规律的
单选按钮并不意味着要取消选中…它不是单选按钮它是一个复选框，应该根据是否选中它来显示内容，但在您的JSFIDLE中，这些是
单选按钮
s…我刚刚更新了小提琴，我在那里选错了小提琴