带标签的复选框

时间：2017-10-30 17:43:45

标签： javascript html

我正在尝试根据复选框显示标签。 您无法看到该复选框，但可以点击。第一个是禁用和检查，其余是正常的。

所以我希望Profile7 Tab一直显示（显然是因为选中了复选框），其余部分在我点击时出现。

我似乎无法解决许多问题。如果我点击内容显示多个内容并继续下降。请帮助我，我已经尝试了这么多个小时：/ 

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

2 个答案:

答案 0 :(得分：1)

你在第一个标签中有一些无用的html标签，请查看此代码。

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

答案 1 :(得分：0)

该示例需要进行一些修改。我冒昧地复制和调整，直到它合理地工作。如果选择了profile7以外的选项卡，则需要更多代码，然后通过单击顶部列表中的名称来隐藏该选项卡。然后应显示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();
                $('#tabWebCSR').show();
            } else {
                $('#hasWebCSR').hide();
                $('#tabWebCSR').hide();
            }
        });

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

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

        $('#webClient').change(function () {
            if ($(this).is(":checked")) {
                $('#hasWebClient').show();
                $('#tabWebClient').show();
            } else {
                $('#hasWebClient').hide();
                $('#tabWebClient').hide();
            }
        });
    });
.tab-content .form-group {
        position: relative;
    }

    .tab-pane {
        position: absolute;
        z-index: 1;
    }

    .tab-pane.active {
        z-index: 2;
    }
<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 ">
            tabProfile7
            <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 id="tabWebCSR" class="tab-pane fade">
            tabWebCSR
            <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 id="tabWebAdmin" class="tab-pane fade">
            tabWebAdmin
            <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 id="tabWebClient" class="tab-pane fade">
            tabWebClient
            <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 class="help-block with-errors"></div>
    </div>
</div>

相关问题
最新问题