Issues with multiSelect and select all in JavaScript

Question

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.

Pedram · Accepted Answer · 2020-02-03T10:30:27.917

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>

When I click on the `Group 1` then all of the checkboxes are selected. In the OP's example, only `Option 1.x` is selected. — Sebastian Kaczmarek, Feb 03 '20 at 07:45
This is not the required solution. it should be as if select All is clicked then All options should be selected or deselected. As your provided solution do. But when clicked on the any of group it should just select or deselect the respective below list only.. — Muhammad Nadeem Arif, Feb 03 '20 at 07:56
@MuhammadNadeemArif Did you test latest version? I just edited my post 6 mins ago — Pedram, Feb 03 '20 at 07:57
Yes this is fine in case of uni-Directional case. but a small problem is here. As if any of suboptions is deselected then the select all must deselected. as well as if any option of group is deselected only that group must deselected but not all items. — Muhammad Nadeem Arif, Feb 03 '20 at 10:19

A. Meshu · Answer 2 · 2020-02-05T12:34:25.610

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

Yes this is fine in case of uni-Directional case. but a small problem is here. As if any of suboptions is deselected then the select all must deselected. as well as if any option of group is deselected only that group must deselected but not all items. — Muhammad Nadeem Arif, Feb 03 '20 at 10:15
I didn't quite understand. Can you describe example of case that fit this case? — A. Meshu, Feb 03 '20 at 11:16
Sorry i could not explained it well. I just want that if I select option 1.1, 1.2, 1.3 then group 1 should automatically checked. same with group 2. and if i checked all options 1.1-2.3 then groups as well as Select checkbox shoul also checked automatically. And then. As i click on "Select All" all options are checked but in this case As I deselect anyone option e.g "Option 1.1" or other to deselect it. it should affect its own group eg "Group 1" as well as "Select All" checkbox should automatically Deselected. — Muhammad Nadeem Arif, Feb 03 '20 at 11:41
Yes it is doing good now. Thank you. Just 1 more issue remained that is in above solution "Select All" not uncheck when unhecking any single option or all options. the "Select All" Option is remain checked. It should also unchecked as the groups are working on uncheking any single respective option they also uncheck that is good. But this is not happening with Select All Option — Muhammad Nadeem Arif, Feb 06 '20 at 13:11

Issues with multiSelect and select all in JavaScript

2 Answers2