CODEWITHSUNDEEP
javascriptjquery
Muhammad Nadeem Arif
Muhammad Nadeem Arif

Reputation: 131

Issues with multiSelect and select all in JavaScript

I am trying to select all items in my multiselect form.

My form is working fine but if I unselect any item after making select all it never selected again even by click Select all. But individually I can select it.

below is my code:

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

This is working currently for once when directly I use Select All, but unfortunately When I perform unselect on any that specifically will not selected with Select All or group Selection.

Upvotes: 1

Views: 605

Answers (2)

A. Meshu
A. Meshu

Reputation: 4148

As for comments i think this is what you want to do (i add notes on the code):

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>

Note: i changed the event from click to change since this is the correct one when handle inputs.

OLD ANSWER: Your code is working. The attr need to be change to prop and that's it:

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

You can read more about it here

Upvotes: 1

Pedram
Pedram

Reputation: 16575

Simply use:

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

Upvotes: 2

Related Questions