title: Want to get the value of checkbox and assign it's value to the class-name
body: <p>In a div, I have a 'select all' checkbox. When this checkbox is checked, all the other checkboxes will automatically checked. I want to assign their values as a class name. I am able to achieve this when a single checkbox is checked. But now I want this should work when all checkbox is checked at once when a select-all checkbox is checked. ​</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.select-all').on('click', function() {
    let isSelected = $(this).is(':checked');
    $(this).parents('.checkbox-list').find('input[type="checkbox"]').not('.select-all').each(function() {
      if (isSelected) {
        $(this).prop('checked', true);
      } else {
        $(this).prop('checked', false);
      }
    })
  });
  
  $('input:checkbox').not('.select-all').change(function() {
    var cl = $(this).val();
    var cls = 'abc' + '' + cl + '';
    if ($(this).is(':checked')) {
      $(this).addClass(cls);
    } else {
      $(this).removeClass(cls);
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="checkbox-list"&gt;
    &lt;label&gt;&lt;input type="checkbox" class="select-all" name=""&gt;All&lt;/label&gt;
    &lt;label&gt;&lt;input type="checkbox" name="" value="1"&gt;One&lt;/label&gt;
    &lt;label&gt;&lt;input type="checkbox" name="" value="2"&gt;Two&lt;/label&gt;
    &lt;label&gt;&lt;input type="checkbox" name="" value="3"&gt;Three&lt;/label&gt;
    &lt;label&gt;&lt;input type="checkbox" name="" value="4"&gt;Four&lt;/label&gt;
    &lt;label&gt;&lt;input type="checkbox" name="" value="5"&gt;Five&lt;/label&gt;
    &lt;label&gt;&lt;input type="checkbox" name="" value="6"&gt;Six&lt;/label&gt;
    &lt;label&gt;&lt;input type="checkbox" name="" value="6"&gt;Three&lt;/label&gt;
    &lt;label&gt;&lt;input type="checkbox" name="" value="7"&gt;Four&lt;/label&gt;
    &lt;label&gt;&lt;input type="checkbox" name="" value="8"&gt;Five&lt;/label&gt;
    &lt;label&gt;&lt;input type="checkbox" name="" value="9"&gt;Six&lt;/label&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>