将父样式更改应用于组中的所有复选框;全部检查”;运行javascript函数

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

本文关键字：全部 复选框 检查 函数 javascript 运行 样式 应用于      更新时间：2023-09-26

当前，当选中父div元素中的复选框时，我们使用javascript函数来更改该元素的颜色。这非常有效，并通过以下方式进行处理：

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

最近，我们添加了一个单独的javascript函数，允许通过选中或取消选中特定组顶部的复选框来选中或取消选择该组中的所有复选框：

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

然而，尽管我们尝试了我们能想到的一切，我们还是无法弄清楚如何让第二个函数——处理组中所有复选框的选中或取消选中的函数——也更改该事件的父DIV的背景色。任何帮助、建议或例子都将不胜感激。

非常感谢。

Richard

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

$(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();
}

    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"); 
      }
    }
相关文章：