如何在两个选择框之间切换复选框状态？

Question

我有两个选择框，用于加载联系人和联系人组，如何一次显示一个div，通过选中或取消选中复选框来切换它们？ 下面的代码显示一个处于关闭状态，并在检查时显示两个而不是隐藏第一个并显示第二个。

代码段

   $(document).ready(function () {

      var checkbox = $('#checker'); 

      var dependent = $('#dependent-box');

      var dependent2 = $('#dependent-box2');

      if (checkbox.attr('checked') !== undefined){

         dependent.show();

         dependent2.hide();

      } else {

          dependent2.show();

          dependent.hide();

      }

      checkbox.change(function(e){

         dependent.toggle();
 
      });

  }); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="checker" data-toggle="toggle">
  
                <div id="dependent-box">
                    <div class="form-group" > 
                      <select class="contact-multiple form-control" multiple="multiple" name="to_sms[]" id="toggle1" style="width: 98%;">
                       
                             <option value="Hi">
                              Hi
                            </option>
                          
                         </select>
                     </div>
                </div>
                <div id="dependent-box2">
                    <div class="form-group" > 
                      <select class="contact-multiple form-control" multiple="multiple" name="to_sms[]" id="toggle1" style="width: 98%;">
                       
                             <option value="Hi">
                              Hello
                            </option>
                          
                         </select>
                     </div>
                </div>

Answer 1

您没有切换更改功能中的第二个框。

  checkbox.change(function(e){
     dependent.toggle();    
     dependent2.toggle();
  });

Answer 2

检查是否选中了检查器：

$(document).ready(function () {

      var checkbox = $('#checker'); 
      var dependent = $('#dependent-box');
      var dependent2 = $('#dependent-box2');
      dependent2.hide();
      checkbox.change(function(e){
        if(this.checked){
         dependent.hide();
         dependent2.show();
        }else
        {
         dependent.show();
         dependent2.hide();
        }
      });

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="checker" data-toggle="toggle">
  
                <div id="dependent-box">
                    <div class="form-group" > 
                      <select class="contact-multiple form-control" multiple="multiple" name="to_sms[]" id="toggle1" style="width: 98%;">
                       
                             <option value="Hi">
                              Hi
                            </option>
                          
                         </select>
                     </div>
                </div>
                <div id="dependent-box2">
                    <div class="form-group" > 
                      <select  class="contact-multiple form-control" multiple="multiple" name="to_sms[]" id="toggle1" style="width: 98%;">
                       
                             <option value="Hi">
                              Hello
                            </option>
                          
                         </select>
                     </div>
                </div>