Select all for checkbox does not work

Question

  <div class="col-6 col-md-3">
  <p class="orange OldStandard"> Menu Filters</p>
  <input type="button" class="check" value="Select All"/>
  <input type="button" class="uncheck" value= "Unselect All"/>
  <br>
        <input type="checkbox" id="vegan" checked/> <label for="vegan">Vegan</label>
        <br/>
        <input type="checkbox" id="vegetarian" checked/> <label for="vegetarian">Vegetarian</label>
        <br/>
        <input type="checkbox" id="pescetarian" checked/> <label for="pescetarian">Pescetarian</label>
         <br/>
        <input type="checkbox" id="dairy-free" checked/> <label for="dairy-free">Dairy-free</label>
         <br/>
        <input type="checkbox" id="egg-free" checked/> <label for="egg-free">Egg-free</label>
         <br/>
        <input type="checkbox" id="fish-free" checked/> <label for="fish-free">Fish-free</label>
         <br/>
        <input type="checkbox" id="shellfish" checked/> <label for="shellfish">Shellfish-free</label>
          <br/>
        <input type="checkbox" id="tree" checked/> <label for="tree">Tree nut-free</label>
          <br/>
        <input type="checkbox" id="peanut" checked/> <label for="peanut">Peanut-free</label>
          <br/>
        <input type="checkbox" id="soy" checked/> <label for="soy">Soy-free</label>
          <br/>
        <input type="checkbox" id="total-fat" checked/> <label for="total-fat">Low Total Fat</label>
          <br/>
        <input type="checkbox" id="saturated-fat" checked/> <label for="saturated-fat">Low Saturated Fat</label>
          <br/>
        <input type="checkbox" id="cholesterol" checked/> <label for="cholesterol">Low Cholesterol</label>
          <br/>
        <input type="checkbox" id="sodium" checked/> <label for="sodium">Low Sodium</label>
          <br/>
        <input type="checkbox" id="protein" checked/> <label for="protein">Protein >25g</label>
          <br/>
        <input type="checkbox" id="calories" checked/> <label for="calories">Calories  <450 calories</label>
  <br>

  </div>
<script src="http://code.jquery.com/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>
$(document).ready(function() {
    $('.check').click(function (){
        $('input[type="checkbox"]').attr("checked", "checked");
    });
    $('.uncheck').click(function (){
        $('input:checkbox').removeAttr('checked');
    });
});
</script>

This is my code, it contains many food selections, now they are all preselected when you first enter the page, and you have an option to unselect or select all, my unselect works perfectly fine, but my select all does not work at all, I tried different ways for example the one above and : $('input:checkbox').attr("checked", "checked"); but it still didnt work. Could anyone help?

change `.attr("checked", "checked")` to `prop('checked', true)` or false for unchecked — Pete, Mar 31 '17 at 13:46
Possible duplicate of [.prop() vs .attr()](http://stackoverflow.com/questions/5874652/prop-vs-attr) — Pete, Mar 31 '17 at 13:50

score 3 · Accepted Answer · answered Mar 31 '17 at 13:46

To fix the issue use prop('checked', true) instead of attr(), and prop('checked', false) instead of removeAttr():

$('.check').click(function() {
  $('input[type="checkbox"]').prop("checked", true);
});

$('.uncheck').click(function() {
  $('input:checkbox').prop("checked", false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="col-6 col-md-3">
  <p class="orange OldStandard"> Menu Filters</p>
  <input type="button" class="check" value="Select All" />
  <input type="button" class="uncheck" value="Unselect All" /><br>
  
  <input type="checkbox" id="vegan" checked/> <label for="vegan">Vegan</label><br/>
  <input type="checkbox" id="vegetarian" checked/> <label for="vegetarian">Vegetarian</label><br/>
  <input type="checkbox" id="pescetarian" checked/> <label for="pescetarian">Pescetarian</label><br/>
  <input type="checkbox" id="dairy-free" checked/> <label for="dairy-free">Dairy-free</label><br/>
  <input type="checkbox" id="egg-free" checked/> <label for="egg-free">Egg-free</label><br/>
  <input type="checkbox" id="fish-free" checked/> <label for="fish-free">Fish-free</label><br/>
  <input type="checkbox" id="shellfish" checked/> <label for="shellfish">Shellfish-free</label><br/>
  <input type="checkbox" id="tree" checked/> <label for="tree">Tree nut-free</label><br/>
  <input type="checkbox" id="peanut" checked/> <label for="peanut">Peanut-free</label><br/>
  <input type="checkbox" id="soy" checked/> <label for="soy">Soy-free</label><br/>
  <input type="checkbox" id="total-fat" checked/> <label for="total-fat">Low Total Fat</label><br/>
  <input type="checkbox" id="saturated-fat" checked/> <label for="saturated-fat">Low Saturated Fat</label><br/>
  <input type="checkbox" id="cholesterol" checked/> <label for="cholesterol">Low Cholesterol</label><br/>
  <input type="checkbox" id="sodium" checked/> <label for="sodium">Low Sodium</label><br/>
  <input type="checkbox" id="protein" checked/> <label for="protein">Protein >25g</label><br/>
  <input type="checkbox" id="calories" checked/> <label for="calories">Calories  &lt; 450 calories</label><br>
</div>

Also note that you should use the HTML character entity for <, <, so that it doesn't interfere with your HTML.

Select all for checkbox does not work

1 Answers1