CODEWITHSUNDEEP
javascriptjquerycss
Benji
Benji

Reputation: 37

How to create a select all function using jquery

I am working on a jquery function which is acting as a select all option. Everything works great except, when I deselect any of my children's element of select all the option is still enabled. I just want to disable or enable the select all option depending on the children. Here is my code.

$('#show_ntf_all').click(function() {
  if (!$(this).hasClass('check')) {
    $('.show_ntf').addClass('check');
    $(this).addClass('check');
  } else {
    $('.show_ntf').removeClass('check');
    $(this).removeClass('check');
  }
});

$('.sep_fld').on('click', '.show_ntf', function() {
  if ($(this).hasClass('check')) {
    var check_length = $('.show_ntf').filter(".check").length;
    var show_length = $('.show_ntf').length;
    console.log(check_length);
    console.log(show_length);
    var check = check_length == show_length;
    $(this).removeClass('check')
    if (check == true) {
      $('#show_ntf_all').addClass('check');
    } else {
      $('#show_ntf_all').removeClass('check');
    }
  } else {
    $(this).addClass('check')
  }
});
ul {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
  padding: 5px 0px;
  margin: 0;
}

#show_ntf_all {
  margin-bottom: 20px;
}

li label {
  color: #aaa;
}

li.check label {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='sett_field notif_all'>
  <ul>
    <li class="" id="show_ntf_all">
      <label>select all</label>
    </li>
  </ul>
</div>

<div class='sett_field sep_fld'>
  <ul>
    <li class="show_ntf">
      <label>Show Notification</label>
    </li>
  </ul>
</div>
<div class='sett_field sep_fld'>
  <ul>
    <li class="show_ntf">
      <label>Show Notification</label>
    </li>
  </ul>
</div>
<div class='sett_field sep_fld'>
  <ul>
    <li class="show_ntf">
      <label>Show Notification</label>
    </li>
  </ul>
</div>
<div class='sett_field sep_fld'>
  <ul>
    <li class="show_ntf">
      <label>Show Notification</label>
    </li>
  </ul>
</div>

Thanks in advance.

Upvotes: 0

Views: 98

Answers (4)

Anujith
Anujith

Reputation: 9370

Try this (also, you can shorten your code by using toggleClass):

$('.sep_fld').on('click', '.show_ntf', function () {
        $(this).toggleClass('check');
        var check_length = $('.show_ntf').filter(".check").length;
        var show_length = $('.show_ntf').length;
        var check = check_length==show_length;
        if (check==true){
            $('#show_ntf_all').addClass('check');                
        }
        else{
            $('#show_ntf_all').removeClass('check');
        }
});

Full snippet:

$('#show_ntf_all').click(function() {
  if (!$(this).hasClass('check')) {
    $('.show_ntf').addClass('check');
    $(this).addClass('check');
  } else {
    $('.show_ntf').removeClass('check');
    $(this).removeClass('check');
  }
});

$('.sep_fld').on('click', '.show_ntf', function() {
  $(this).toggleClass('check');
  var check_length = $('.show_ntf').filter(".check").length;
  var show_length = $('.show_ntf').length;
  console.log(check_length);
  console.log(show_length);
  var check = check_length == show_length;
  if (check == true) {
    $('#show_ntf_all').addClass('check');
  } else {
    $('#show_ntf_all').removeClass('check');
  }
});
ul {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
  padding: 5px 0px;
  margin: 0;
}

#show_ntf_all {
  margin-bottom: 20px;
}

li label {
  color: #aaa;
}

li.check label {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='sett_field notif_all'>
  <ul>
    <li class="" id="show_ntf_all">
      <label>select all</label>
    </li>
  </ul>
</div>

<div class='sett_field sep_fld'>
  <ul>
    <li class="show_ntf">
      <label>Show Notification</label>
    </li>
  </ul>
</div>
<div class='sett_field sep_fld'>
  <ul>
    <li class="show_ntf">
      <label>Show Notification</label>
    </li>
  </ul>
</div>
<div class='sett_field sep_fld'>
  <ul>
    <li class="show_ntf">
      <label>Show Notification</label>
    </li>
  </ul>
</div>
<div class='sett_field sep_fld'>
  <ul>
    <li class="show_ntf">
      <label>Show Notification</label>
    </li>
  </ul>
</div>

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167210

Check the number of selectable items and selected items. If both are equal, add the class above:

$('.sep_fld').on('click', '.show_ntf', function () {
    if($(this).hasClass('check')){
        var check_length = $('.show_ntf').filter(".check").length;
        var show_length = $('.show_ntf').length;
        console.log(check_length);
        console.log(show_length);
        $(this).removeClass('check')
        if (check_length==show_length)
            $('#show_ntf_all').addClass('check');                
        else
            $('#show_ntf_all').removeClass('check');
    }
    else{
        $(this).addClass('check')
    }
});

Full code snippet:

$('#show_ntf_all').click(function() {
  if (!$(this).hasClass('check')) {
    $('.show_ntf').addClass('check');
    $(this).addClass('check');
  } else {
    $('.show_ntf').removeClass('check');
    $(this).removeClass('check');
  }
});

$('.sep_fld').on('click', '.show_ntf', function() {
  if ($(this).hasClass('check')) {
    var check_length = $('.show_ntf').filter(".check").length;
    var show_length = $('.show_ntf').length;
    console.log(check_length);
    console.log(show_length);
    $(this).removeClass('check')
    if (check_length == show_length)
      $('#show_ntf_all').addClass('check');
    else
      $('#show_ntf_all').removeClass('check');
  } else {
    $(this).addClass('check')
  }
});
ul {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
  padding: 5px 0px;
  margin: 0;
}

#show_ntf_all {
  margin-bottom: 20px;
}

li label {
  color: #aaa;
}

li.check label {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='sett_field notif_all'>
  <ul>
    <li class="" id="show_ntf_all">
      <label>select all</label>
    </li>
  </ul>
</div>

<div class='sett_field sep_fld'>
  <ul>
    <li class="show_ntf">
      <label>Show Notification</label>
    </li>
  </ul>
</div>
<div class='sett_field sep_fld'>
  <ul>
    <li class="show_ntf">
      <label>Show Notification</label>
    </li>
  </ul>
</div>
<div class='sett_field sep_fld'>
  <ul>
    <li class="show_ntf">
      <label>Show Notification</label>
    </li>
  </ul>
</div>
<div class='sett_field sep_fld'>
  <ul>
    <li class="show_ntf">
      <label>Show Notification</label>
    </li>
  </ul>
</div>

Upvotes: 0

ashfaq.p
ashfaq.p

Reputation: 5487

Just change this part and it will work:

if (check==true){
    $('#show_ntf_all').removeClass('check');                
}
else{
    $('#show_ntf_all').addClass('check');
}

Upvotes: 0

NathanB
NathanB

Reputation: 311

I achieved this by simply moving the $(this).removeClass('check'); to the top of the click function.

$('.sep_fld').on('click', '.show_ntf', function () {
    if($(this).hasClass('check')){
        $(this).removeClass('check');
        var check_length = $('.show_ntf.check').length;
        var show_length = $('.show_ntf').length;
        console.log(check_length);
        console.log(show_length);
        var check = check_length==show_length;

        if (check==true){
            $('#show_ntf_all').addClass('check');                
        }
        else{
            $('#show_ntf_all').removeClass('check');
        }
    }
    else{
        $(this).addClass('check')
    }
});

Upvotes: 0

Related Questions