javascript - 带选项卡的复选框

Question

我正在尝试根据复选框显示选项卡。 您看不到该复选框，但可以点击。第一个禁用并检查，其余正常。

所以我希望 Profile7 选项卡始终显示(显然是因为选中了该复选框)，而其余部分在我单击时显示。

有很多问题我似乎无法解决。如果我单击内容，则会显示多个内容并继续向下。请帮助我解决这个问题，我已经尝试了很多小时了:/

$(document).ready(function() {
  //Start web* hidden
  $('#hasWebAdmin').hide();
  $('#hasWebClient').hide();
  $('#hasWebCSR').hide();

  //Hide/Show Branch tabs
  $('#webCSR').change(function() {
    if($(this).is(":checked")) {
      $('#hasWebCSR').show();
    } else {
      $('#hasWebCSR').hide();
    }
  });
  
  $('#profile7').change(function() {
    if($(this).is(":checked")) {
      $('#hasProfile7').show();
    } else {
      $('#hasProfile7').hide();
    }
  });

  $('#webAdmin').change(function() {
    if($(this).is(":checked")) {
      $('#hasWebAdmin').show();
    } else {
      $('#hasWebAdmin').hide();
    }
  });

  $('#webClient').change(function() {
    if($(this).is(":checked")) {
      $('#hasWebClient').show();
    } else {
      $('#hasWebClient').hide();
    }
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<label>Deploy Apps</label>
<div class="form-group">
  <div class="checkbox checkbox-primary">
    <input type="checkbox" id="profile7" name="hasWebCSR" checked disabled>
    <label for="profile7">Profile 7</label>
  </div>
  
  <div class="checkbox checkbox-primary">
    <input type="checkbox" id="webCSR" name="hasWebCSR">
    <label for="webCSR">WebCSR</label>
  </div>

  <div class="checkbox checkbox-primary">
    <input type="checkbox" id="webAdmin" name="hasWebAdmin">
    <label for="webAdmin">WebAdmin</label>
  </div>

  <div class="checkbox checkbox-primary">
    <input type="checkbox" id="webClient" name="hasWebClient">
    <label for="webClient">WebClient</label>
  </div>
</div>

<ul class="nav nav-tabs">
  <li class="active">
    <a data-toggle="tab" href="#tabProfile7" id="hasProfile7">Profile 7</a>
  </li>
  <li>
    <a data-toggle="tab" href="#tabWebCSR" id="hasWebCSR">WebCSR</a>
  </li>
  <li>
    <a data-toggle="tab" href="#tabWebAdmin" id="hasWebAdmin">WebAdmin</a>
  </li>
  <li>
    <a data-toggle="tab" href="#tabWebClient" id="hasWebClient">WebClient</a>
  </li>
</ul>

<div class="tab-content">
  <div class="form-group">
    <div id="tabProfile7" class="tab-pane fade in active ">
      <div class="radio">
        <label>
          <input type="radio" name="profile7Branch" value="development" data-error="Please, choose one option">
          development
        </label>
      </div>

      <div class="radio">
        <label>
          <input type="radio" name="profile7Branch" value="master" data-error="Please, choose one option">
          master
        </label>
      </div>
    </div>
    <div class="help-block with-errors"></div>
  </div>
</div>
<div id="tabWebCSR" class="tab-pane fade">
  <div class="form-group">
    <div class="radio">
      <label>
        <input type="radio" value="development" name="webCSRBranch">
        development
      </label>
    </div>
                            
    <div class="radio">
      <label>
        <input type="radio" value="master" name="webCSRBranch">
        master
      </label>
    </div>
  </div>
</div>
<div id="tabWebAdmin" class="tab-pane fade ">
  <div class="form-group">
    <div class="radio">
      <label>
        <input type="radio" value="development" name="webAdminBranch">
        development
      </label>
    </div>
                            
    <div class="radio">
      <label>
        <input type="radio" value="master" name="webAdminBranch">
        master
      </label>
    </div>
  </div>
</div>
<div id="tabWebClient" class="tab-pane fade">
  <div class="form-group">
    <div class="radio">
      <label>
        <input type="radio" value="development" name="webClientBranch">
        development
      </label>
    </div>

    <div class="radio">
      <label>
        <input type="radio" value="master" name="webClientBranch">
        master
      </label>
    </div>

  </div>
</div>

Answer 1

第一个选项卡中有一些无用的 html 标记，请检查此代码。

$(document).ready(function() {
  //Start web* hidden
  $('#hasWebAdmin').hide();
  $('#hasWebClient').hide();
  $('#hasWebCSR').hide();
  //Hide/Show Branch tabs
  $('#webCSR').change(function() {
    if ($(this).is(":checked")) {
      $('#hasWebCSR').show();

    } else {
      $('#hasWebCSR').hide();

    }
  });
  $('#profile7').change(function() {
    if ($(this).is(":checked")) {
      $('#hasProfile7').show();

    } else {
      $('#hasProfile7').hide();

    }
  });
  $('#webAdmin').change(function() {
    if ($(this).is(":checked")) {
      $('#hasWebAdmin').show();

    } else {
      $('#hasWebAdmin').hide();
    }
  });
  $('#webClient').change(function() {
    if ($(this).is(":checked")) {
      $('#hasWebClient').show();
    } else {
      $('#hasWebClient').hide();
    }
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<label>Deploy Apps</label>
<div class="form-group">
  <div class="checkbox checkbox-primary">
    <input type="checkbox" id="profile7" name="hasWebCSR" checked disabled>
    <label for="profile7">Profile 7</label>
  </div>
  <div class="checkbox checkbox-primary">
    <input type="checkbox" id="webCSR" name="hasWebCSR">
    <label for="webCSR">WebCSR</label>
  </div>
  <div class="checkbox checkbox-primary">
    <input type="checkbox" id="webAdmin" name="hasWebAdmin">
    <label for="webAdmin">WebAdmin</label>
  </div>
  <div class="checkbox checkbox-primary">
    <input type="checkbox" id="webClient" name="hasWebClient">
    <label for="webClient">WebClient</label>
  </div>
</div>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#tabProfile7" id="hasProfile7">Profile 7</a></li>
  <li><a data-toggle="tab" href="#tabWebCSR" id="hasWebCSR">WebCSR</a>
  </li>
  <li><a data-toggle="tab" href="#tabWebAdmin" id="hasWebAdmin">WebAdmin</a>
  </li>
  <li><a data-toggle="tab" href="#tabWebClient" id="hasWebClient">WebClient</a>
  </li>
</ul>

<div class="tab-content">
    <div id="tabProfile7" class="tab-pane fade in active ">
      <span>tab1</span>
      <div class="radio">
        <label><input type="radio"
                                                          name="profile7Branch"
                                                          value="development"
                                                          data-error="Please, choose one option"
                                                          > development
                                            </label>
      </div>

      <div class="radio">
        <label><input type="radio"
                                                          name="profile7Branch"
                                                          value="master"
                                                          data-error="Please, choose one option"
                                                          > master
                                            </label>
      </div>

    <div class="help-block with-errors"></div>
  </div>
<div id="tabWebCSR" class="tab-pane fade">
  <span>tab2</span>
  <div class="form-group">

    <div class="radio">
      <label><input type="radio" value="development"
                                                      name="webCSRBranch"> development
                                        </label>
    </div>

    <div class="radio">
      <label><input type="radio" value="master"
                                                      name="webCSRBranch"> master
                                        </label>
    </div>

  </div>
</div>
<div id="tabWebAdmin" class="tab-pane fade ">
  <span>tab3</span>
  <div class="form-group">

    <div class="radio">
      <label><input type="radio" value="development"
                                                      name="webAdminBranch"> development
                                        </label>
    </div>

    <div class="radio">
      <label><input type="radio" value="master"
                                                      name="webAdminBranch"> master
                                        </label>
    </div>

  </div>
</div>
<div id="tabWebClient" class="tab-pane fade">
  <span>tab4</span>
  <div class="form-group">

    <div class="radio">
      <label><input type="radio" value="development"
                                                      name="webClientBranch"> development
                                        </label>
    </div>

    <div class="radio">
      <label><input type="radio" value="master"
                                                      name="webClientBranch"> master
                                        </label>
    </div>

  </div>
</div>
</div>