Проблемы с multiSelect и выберите все в JavaScript

Question

Я пытаюсь выбрать все элементы в форме множественного выбора.

Моя форма работает нормально, но если я отменил выбор какого-либо элемента после выбора, выберите все, что он никогда не выделил, даже нажав кнопку Выбрать все. Но по отдельности я могу выбрать его.

ниже мой код:

$('.selectall').click(function() {
  if ($(this).is(':checked')) {
    $('.select-all').attr('checked', true);
    $('.select-all').closest(".bold").find('input').attr('checked', true);
  } else {
    $('.select-all').attr('checked', false);
    $('.select-all').closest(".bold").find('input').attr('checked', false);
  }
});
$('.select-all').click(function() {
  if ($(this).is(':checked')) {
    $(this).closest(".bold").find('input').attr('checked', true);
  } else {
    $(this).closest(".bold").find('input').attr('checked', false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="needs-validation" novalidate>
  <ul class="Items-Select">
    <li class="search-items">
      <div class="input-group">
        <span class="input-group-addon">
          <i class="fa fa-search text-info" style="font-size:24px"></i>
        </span>
        <input type="search" class="form-control" placeholder="Search" onkeyup="mySearch()"  id="Search">
        <span class="input-group-btn">
          <button class="btn btn-default" type="reset">
            <i class="fa fa-times-circle-o text-danger" style="font-size:24px"></i>
          </button>
        </span>
      </div>
    </li>
    <li class="bold">
      <label class="checkbox">
        <input type="checkbox" class="selectall">&nbsp;Select all
      </label>
    </li>
    <li class="bold">
      <label class="checkbox">
        <input type="checkbox" class="select-all">&nbsp;Group 1
      </label>
      <span class="caret-container"><b class="caret"></b></span>
      <ul class="group" id="groupa">
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="1-1"> Option 1.1
          </label>
        </li>
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="1-2"> Option 1.2
          </label>
       </li>
       <li class="dropdown-item">
         <label class="checkbox">
           <input type="checkbox" value="1-3"> Option 1.3
         </label>
       </li>
     </ul>
    </li>
    <li class="bold">
      <label class="checkbox">
        <input type="checkbox" class="select-all">&nbsp;Group 2
      </label>
      <span class="caret-container"><b class="caret"></b></span>
      <ul class="group" id="groupb">
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="2-1"> Option 2.1
          </label>
        </li>
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="2-2"> Option 2.2
          </label>
        </li>
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="2-3"> Option 2.3
          </label>
        </li>
      </ul>
    </li>
  </ul>
</form>

Это работает в данный момент один раз, когда я непосредственно использую «Выбрать все», но, к сожалению, когда я выполняю отмену выбора для любого, который специально не будет выбран с «Выбрать все» или «Выбор группы» .

Answer 1

Что касается комментариев, я думаю, что это то, что вы хотите сделать (я добавляю примечания к коду):

var checker = false; // init flag - we will use it on the script
$('.selectall').change(function() {
  if ($(this).is(':checked')) {
    $('.select-all').prop('checked', true);
    $('.select-all').closest(".bold").find('input').prop('checked', true);
  } else {
    $('.select-all').prop('checked', false);
    $('.select-all').closest(".bold").find('input').prop('checked', false);   
  }
});
$('.select-all').change(function() {
  if ($(this).is(':checked')) {
    $(this).closest(".bold").find('input').prop('checked', true);
    checker = true; // change flag
  } else {
    $(this).closest(".bold").find('input').prop('checked', false);
    checker = false; // change flag
  }
});

$('.dropdown-item input').change(function() {
  var ulID = $(this).closest('ul').attr('id'); // get input parent ul id
  var checkedInputLength = $('#'+ulID+' input').length; // check how many input on parent
  var checkedInputChecked = $('#'+ulID+' input:checked').length; // check how many input checked on parent  
  if (checkedInputLength+ulID == checkedInputChecked+ulID) { // if equal then
    checker = true; // change flag
    $('#'+ulID).closest(".bold").find('input').prop('checked', true); // check parent group
  }
  else if (checker === true && checkedInputLength+ulID != checkedInputChecked+ulID) { // if unchek but flag changed
    checker = false; // change flag
    $('#'+ulID).closest(".bold").find('input').prop('checked', false); // uncheck parent group (will uncheck all children input so:)
    $('#'+ulID+' input').not($(this)).prop('checked', true); // check the other two again
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="needs-validation" novalidate>
  <ul class="Items-Select">
    <li class="search-items">
      <div class="input-group">
        <span class="input-group-addon">
          <i class="fa fa-search text-info" style="font-size:24px"></i>
        </span>
        <input type="search" class="form-control" placeholder="Search" onkeyup="mySearch()"  id="Search">
        <span class="input-group-btn">
          <button class="btn btn-default" type="reset">
            <i class="fa fa-times-circle-o text-danger" style="font-size:24px"></i>
          </button>
        </span>
      </div>
    </li>
    <li class="bold">
      <label class="checkbox">
        <input type="checkbox" class="selectall">&nbsp;Select all
      </label>
    </li>
    <li class="bold">
      <label class="checkbox">
        <input type="checkbox" class="select-all">&nbsp;Group 1
      </label>
      <span class="caret-container"><b class="caret"></b></span>
      <ul class="group" id="groupa">
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="1-1"> Option 1.1
          </label>
        </li>
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="1-2"> Option 1.2
          </label>
       </li>
       <li class="dropdown-item">
         <label class="checkbox">
           <input type="checkbox" value="1-3"> Option 1.3
         </label>
       </li>
     </ul>
    </li>
    <li class="bold">
      <label class="checkbox">
        <input type="checkbox" class="select-all">&nbsp;Group 2
      </label>
      <span class="caret-container"><b class="caret"></b></span>
      <ul class="group" id="groupb">
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="2-1"> Option 2.1
          </label>
        </li>
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="2-2"> Option 2.2
          </label>
        </li>
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="2-3"> Option 2.3
          </label>
        </li>
      </ul>
    </li>
  </ul>
</form>

Примечание: я изменил событие с щелчка на изменение, поскольку оно является правильным при обработке входов.

---

СТАРЫЙ ОТВЕТ: Ваш код работает. attr необходимо изменить на prop и все:

$('.selectall').click(function() {
  if ($(this).is(':checked')) {
    $('.select-all').prop('checked', true);
    $('.select-all').closest(".bold").find('input').prop('checked', true);
  } else {
    $('.select-all').prop('checked', false);
    $('.select-all').closest(".bold").find('input').prop('checked', false);   
  }
});
$('.select-all').click(function() {
  if ($(this).is(':checked')) {
    $(this).closest(".bold").find('input').prop('checked', true);
  } else {
    $(this).closest(".bold").find('input').prop('checked', false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="needs-validation" novalidate>
  <ul class="Items-Select">
    <li class="search-items">
      <div class="input-group">
        <span class="input-group-addon">
          <i class="fa fa-search text-info" style="font-size:24px"></i>
        </span>
        <input type="search" class="form-control" placeholder="Search" onkeyup="mySearch()"  id="Search">
        <span class="input-group-btn">
          <button class="btn btn-default" type="reset">
            <i class="fa fa-times-circle-o text-danger" style="font-size:24px"></i>
          </button>
        </span>
      </div>
    </li>
    <li class="bold">
      <label class="checkbox">
        <input type="checkbox" class="selectall">&nbsp;Select all
      </label>
    </li>
    <li class="bold">
      <label class="checkbox">
        <input type="checkbox" class="select-all">&nbsp;Group 1
      </label>
      <span class="caret-container"><b class="caret"></b></span>
      <ul class="group" id="groupa">
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="1-1"> Option 1.1
          </label>
        </li>
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="1-2"> Option 1.2
          </label>
       </li>
       <li class="dropdown-item">
         <label class="checkbox">
           <input type="checkbox" value="1-3"> Option 1.3
         </label>
       </li>
     </ul>
    </li>
    <li class="bold">
      <label class="checkbox">
        <input type="checkbox" class="select-all">&nbsp;Group 2
      </label>
      <span class="caret-container"><b class="caret"></b></span>
      <ul class="group" id="groupb">
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="2-1"> Option 2.1
          </label>
        </li>
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="2-2"> Option 2.2
          </label>
        </li>
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="2-3"> Option 2.3
          </label>
        </li>
      </ul>
    </li>
  </ul>
</form>

Подробнее об этом можно прочитать здесь

Answer 2

Просто используйте:

$('.selectall').click(function() {
  $('input:checkbox').not(this).prop('checked', this.checked);
});

$('.select-all').click(function() {
  $(this).closest(".bold").find('input').prop('checked', this.checked);
});

$('.group').find('input:checkbox').click(function(){
  if(!$(this).is(':checked')){
    $(this).parents('.group').parent('.bold').find('input.select-all').prop('checked', false);
    $('input.selectall').prop('checked', false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="needs-validation" novalidate>
  <ul class="Items-Select">
    <li class="search-items">
      <div class="input-group">
        <span class="input-group-addon">
          <i class="fa fa-search text-info" style="font-size:24px"></i>
        </span>
        <input type="search" class="form-control" placeholder="Search" onkeyup="mySearch()" id="Search">
        <span class="input-group-btn">
          <button class="btn btn-default" type="reset">
            <i class="fa fa-times-circle-o text-danger" style="font-size:24px"></i>
          </button>
        </span>
      </div>
    </li>
    <li class="bold">
      <label class="checkbox">
        <input type="checkbox" class="selectall">&nbsp;Select all
      </label>
    </li>
    <li class="bold">
      <label class="checkbox">
        <input type="checkbox" class="select-all">&nbsp;Group 1
      </label>
      <span class="caret-container"><b class="caret"></b></span>
      <ul class="group" id="groupa">
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="1-1"> Option 1.1
          </label>
        </li>
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="1-2"> Option 1.2
          </label>
        </li>
        <li class="dropdown-item">
          <label class="checkbox">
           <input type="checkbox" value="1-3"> Option 1.3
         </label>
        </li>
      </ul>
    </li>
    <li class="bold">
      <label class="checkbox">
        <input type="checkbox" class="select-all">&nbsp;Group 2
      </label>
      <span class="caret-container"><b class="caret"></b></span>
      <ul class="group" id="groupb">
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="2-1"> Option 2.1
          </label>
        </li>
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="2-2"> Option 2.2
          </label>
        </li>
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="2-3"> Option 2.3
          </label>
        </li>
      </ul>
    </li>
  </ul>
</form>