JQuery - multiple checkboxes actions

Question

I have a form with multiple checkboxes and I would like to get this behavior:

• The background of the "my_class" parent div changes when a checkbox is checked
• The top button can Check or Uncheck all checkboxes
• The background of all the "my_class" divs change when button clicked

CSS, HTML and JS code

$(document).ready(function() {
  $(".check_all:button").toggle(function() {
    $("input:checkbox").attr("checked", "checked");
    $("input:checkbox").closest(".my_class").addClass("checked_bg");
    $(this).val("Uncheck All")
  },
  function() {
    $("input:checkbox").removeAttr("checked");
    $("input:checkbox").closest(".my_class").removeClass("checked_bg");
    $(this).val("Check All");
  });

  $("input:checkbox").on("change", function() {
    var that = this;
    $(this).closest(".my_class").css("background-color", function() {
       return that.checked ? "#bcfab9" : "#ffffff";
    });
  });
});

.checked_bg {
  background-color: #bcfab9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="check_all" value="Check All">
<br>
<br>
<label for="checkbox_1">
      <div class="my_class">
        <input type="checkbox" id="checkbox_1" name="Box[]" value="1">
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div>Duis sit amet malesuada ligula.</div>
      </div>
    </label>

<label for="checkbox_2">
      <div class="my_class">
        <input type="checkbox" id="checkbox_2" name="Box[]" value="2">
        <div>Quisque magna est, blandit ac laoreet eu, consectetur eget turpis.</div>
        <div>Fusce nisi tortor, suscipit sed luctus eu, varius eget massa.</div>
      </div>
    </label>

Test page: (JSFiddle)[https://jsfiddle.net/o4h97eae/18/]

It doesn't work, would you please help me to sort this out?

Answer 1

Some problems I've spotted:

• You can't place everything inside a label.
• toggle will hide the button instantly, beacuse that is what it have to do. You need a click event listener and some decision, what to do.
• To check the boxes you need to use .prop() instead of .attr()
• If you want to trigger the change event of the checkboxes too, you need to trigger it manually
• Keep in mind, that the button added a class and the change event add a background-color. This might have a strage behavior. If you want to prevent that the background color persists after uncheck all, you need to remove the background-color too, or trigger the event manually, as mentioned before.

$(document).ready(function() {
  $(".check_all:button").on('click', function() {
    var checkboxes = $("input:checkbox");

    if($(this).val() === "Check All") {
      checkboxes.prop("checked", true).closest(".my_class").addClass("checked_bg");
      $(this).val("Uncheck All")
    }
    else {
      checkboxes.prop("checked", false).closest(".my_class").removeClass("checked_bg");
      $(this).val("Check All");
    }
  });

  $("input:checkbox").on("change", function() {
    var that = this;
    $(this).closest(".my_class").css("background-color", function() {
      return that.checked ? "#bcfab9" : "#ffffff";
    });
  });
});

.checked_bg {
  background-color: #bcfab9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" class="check_all" value="Check All">

<br /> <br />

<label for="checkbox_1">checkbox_1</label>
<div class="my_class">
  <input type="checkbox" id="checkbox_1" name="Box[]" value="1">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <div>Duis sit amet malesuada ligula.</div>
</div>


<label for="checkbox_2">checkbox_2</label>
<div class="my_class">
  <input type="checkbox" id="checkbox_2" name="Box[]" value="2">
  <div>Quisque magna est, blandit ac laoreet eu, consectetur eget turpis.</div>
  <div>Fusce nisi tortor, suscipit sed luctus eu, varius eget massa.</div>
</div>

An example how it would be better/more consistend and even has less code overhead:

jQuery(function($) {
  $(".check_all").on("click", function() {
    var check = $(this).val() === "Check All";
    $("input:checkbox").prop("checked", check).trigger('change');
    $(this).val(check ? "Uncheck All" : "Check All")
  });

  $("input:checkbox").on("change", function() {
    $(this).closest(".my_class").toggleClass("checked_bg", $(this).prop("checked"));
  });
});

.checked_bg {
  background-color: #bcfab9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" class="check_all" value="Check All">

<br /> <br />

<label for="checkbox_1">checkbox_1</label>
<div class="my_class">
  <input type="checkbox" id="checkbox_1" name="Box[]" value="1">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <div>Duis sit amet malesuada ligula.</div>
</div>


<label for="checkbox_2">checkbox_2</label>
<div class="my_class">
  <input type="checkbox" id="checkbox_2" name="Box[]" value="2">
  <div>Quisque magna est, blandit ac laoreet eu, consectetur eget turpis.</div>
  <div>Fusce nisi tortor, suscipit sed luctus eu, varius eget massa.</div>
</div>