checkbox list with divs, how to color rows and select all

Question

Newbie and first question so be gentle! I found http://jsfiddle.net/MJVKB/169/ from a previous question which works great. I'm trying to find a way to add a 'select all / deselect all checkbox'. I can get the multiple selection to work, but can't get all the colors to highlight.

Can someone help me add the correct code to do this? Any help really appreciated. Thanks

jQuery.fn.multiselect = function() {
  $(this).each(function() {
    var checkboxes = $(this).find("input:checkbox");
    checkboxes.each(function() {
      var checkbox = $(this);
      // Highlight pre-selected checkboxes
      if (checkbox.attr("checked"))
        checkbox.parent().addClass("multiselect-on");

      // Highlight checkboxes that the user selects
      checkbox.click(function() {
        if (checkbox.attr("checked"))
          checkbox.parent().addClass("multiselect-on");
        else
          checkbox.parent().removeClass("multiselect-on");
        alert($("option:selected"));
      });
    });
  });
};

$(function() {
  $(".multiselect").multiselect();
});

.multiselect {
  width:20em;
  height:15em;
  border:solid 1px #c0c0c0;
  overflow:auto;
}

.multiselect label {
  display:block;
}

.multiselect-on {
  color:white;
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiselect">
  <label><input type="checkbox" name="option[]" value="1" />Green</label>
  <label><input type="checkbox" name="option[]" value="2" />Red</label>
  <label><input type="checkbox" name="option[]" value="6" />Black</label>
  <label><input type="checkbox" name="option[]" value="7" />White</label>
</div>

Answer 1

Try using .prop() and .change() methods instead

.prop() documentation

jQuery.fn.multiselect = function() {
    $(this).each(function() {
        var checkboxes = $(this).find("input:checkbox");
        checkboxes.each(function() {
            var checkbox = $(this);
            // Highlight pre-selected checkboxes
            if (checkbox.prop("checked"))
                checkbox.parent().addClass("multiselect-on");
 
            // Highlight checkboxes that the user selects
            checkbox.change(function() {
                if (checkbox.prop("checked"))
                    checkbox.parent().addClass("multiselect-on");
                else
                    checkbox.parent().removeClass("multiselect-on");
                // alert($("option:selected"));
            });
        });
    });
};

$(function() {
     $(".multiselect").multiselect();
     // Select all
     $('[name="all"]').change(function(){
		$('.multiselect').find("input:checkbox").prop('checked', $(this).prop('checked')).change();
     });
});

.multiselect {
    width:20em;
    height:15em;
    border:solid 1px #c0c0c0;
    overflow:auto;
}
 
.multiselect label {
    display:block;
}
 
.multiselect-on {
    color:#ffffff;
    background-color:#000099;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiselect">
    <label><input type="checkbox" name="option[]" value="1" />Green</label>
    <label><input type="checkbox" name="option[]" value="2" />Red</label>
    <label><input type="checkbox" name="option[]" value="3" />Blue</label>
    <label><input type="checkbox" name="option[]" value="4" />Orange</label>
    <label><input type="checkbox" name="option[]" value="5" />Purple</label>
    <label><input type="checkbox" name="option[]" value="6" />Black</label>
    <label><input type="checkbox" name="option[]" value="7" />White</label>
</div>
<label><input type="checkbox" name="all" value="1" />Select All</label>