如何使用复选框在选中或未选中时在选项卡之间切换

How can I use a checkbox to switch between tabs when checked or unchecked?

本文关键字：之间 选项 何使用 复选框      更新时间：2023-09-26

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

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

我可以对代码进行哪些更改，以使复选框选中或关闭选项卡?

更新: https://jsfiddle.net/gtcf3y5d/

HTML: 

        <li role="tab">
            <label data-target="#Custom">
                <input id="custom-mark" name="intervaltype" type="checkbox" />
                Custom
            </label>
        </li>
    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane" id="Custom">
            <h3>Custom...</h3>
        </div>
         <div role="tabpanel" class="tab-pane active" id="Types">
            <h3>Regular</h3>
        </div>

    </div>
</div>
CSS: 

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;
}

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"]').click(function () {
    $('#Custom').toggleClass('active');
    $('#Types').toggleClass('active');
});
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" 
rel="stylesheet" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div role="tabpanel">
    
        
        
        <li role="tab">
            <label data-target="#Custom">
                <input id="custom-mark" name="intervaltype" type="checkbox" />
                Custom
            </label>
        </li>
        
               
    
    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane" id="Custom">
            <h3>Custom...</h3>
        </div>
        
         <div role="tabpanel" class="tab-pane active" id="Types">
            <h3>Regular</h3>
        </div>
        
    </div>
  
</div>

在评论中已经说过，这真的不是这样做的方式，但由于您坚持使用复选框和bootstrap的选项卡，下面是如何做到这一点:

bootstrap的选项卡的工作方式是，每个应该打开一个特定选项卡的元素应该是可见的和可点击的，并且有一个data-target或href属性，指定哪个选项卡应该在点击时可见。

为了模仿这种行为，我不得不模仿bootstrap显示/隐藏标签的方式，并注意显示/隐藏自己的标签。

这是代码:

$('input[name="intervaltype"]').click(function () {
    tabpanel = $(this).parents('[role=tabpanel]')
    tabpanel.find('.tab-content .tab-pane').removeClass('active');
    if ($(this).is(':checked')) {
    	tabpanel.find($(this).data('tab-checked')).addClass('active');
    } else {
    	tabpanel.find($(this).data('tab-unchecked')).addClass('active');
    }
});
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" 
rel="stylesheet" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div role="tabpanel">
  <li role="tab">
    <label>
      <input id="custom-mark" name="intervaltype" type="checkbox" data-tab-checked="#Custom" data-tab-unchecked="#Types" />Custom
    </label>
  </li>
  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane" id="Custom">
      <h3>Custom...</h3>
    </div>
    <div role="tabpanel" class="tab-pane active" id="Types">
      <h3>Regular</h3>
    </div>
  </div>
</div>

再次强调，我非常反对使用这段代码。

相关文章：