javascript - Apply a parent style change to all checkboxes in group when a "check all" javascript function is run

Question

We currently use a javascript function to change the color of a parent DIV element when a checkbox within that element is checked. This works great and is handled via the following:

  $("input[type='checkbox']").change(function(){
    if($(this).is(":checked")){
        $(this).parent().addClass("redBackground"); 
    }else{
        $(this).parent().removeClass("redBackground");  
    }
  });

Recently, we added a separate javascript function that allows for all checkboxes in a specific group to be checked or unchecked via the checking or unchecking of a checkbox at the top of that group:

function toggleGROUPNAME(source) {
  checkboxes = document.getElementsByName('GROUPNAME');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}

However, despite trying everything that we can think of, we can't figure out how to get the second function--the function that handles the checking or unchecking of all of the checkboxes in the group--to also change the parent DIV's background color on that event. Any help, suggestions, or examples would really be appreciated.

Thanks so much.

Richard

Answer 1

您可以显式触发更改事件：

$(checkboxes).change();

如果一个组的复选框总是具有相同的父级，那么仅触发一个复选框的事件就足够了：

$(checkboxes[0]).change();

这将在您的循环之后进行：

function toggleGROUPNAME(source) {
  // don't forget var!!
  var checkboxes = document.getElementsByName('GROUPNAME');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
  $(checkboxes).change();
}

Answer 2

    function toggleGROUPNAME(source) {
      checkboxes = document.getElementsByName('GROUPNAME');
$("input[type='checkbox']").removeClass("redBackground");
      for(var i=0, n=checkboxes.length;i<n;i++) {
        checkboxes[i].checked = source.checked;

    $(checkboxes[i]).parent().addClass("redBackground"); 
      }
    }