Javascript 复选框不为'；在光标离开之前，我不会采取行动

我有大约十个复选框，每个复选框实现不同的功能。我正试图使一个主复选框，将 a） 勾选所有10个复选框； b） 在每个应用程序中实现功能

我已经让一个工作，但由于某种原因，当我检查它时，其他的都不会被检查，直到我把鼠标从主复选框中移开（检查后）。奇怪吧？以下是主复选框和子复选框的代码。（我必须警告您，我对javascript有点陌生，可能写得很糟糕。也欢迎您提供这方面的建议。）

/*更改单一类型的所有按钮*/
$（“a[id^=“+genre+”）.attr（“class”，moderedplacement+“Button”+“showButton”）；
$（[a[id^=“+genre+”）.attr（“onClick”，function（index，currentValue）{return currentValue.replace（mode，moderedplacement）；}）；
$（“#”+“所有”+“流派”+“当前”）.attr（“onClick”，function（index，currentValue）{返回currentValue.replace（mode，moderedplacement）；}）；
/*选中所有复选框*/
如果（类别=='All'）
{
$（“#”+“all_cur”）.attr（“onClick”，函数（index，currentValue）{返回currentValue.replace（mode，moderedplacement）；}）；
对于（变量i=0；i<13；i++）
{
/*更改单个按钮*/
var currentgree=所有类型[i]；
$（“a[id^=“+currentgree+”）.attr（“class”，moderedplacement+“Button”+“showButton”）；
$（“a[id^=“+currentgree+”）.attr（“onClick”，函数（index，currentValue）{返回currentValue.replace（mode，moderedplacement）；}）；
/*快速更换按钮*/
$（“#”+“所有”+“当前类型”+“当前值”）.attr（“onClick”，函数（索引，当前值）{return currentValue.replace（mode，moderedplacement）；}）；
$（“#”+“所有”+“当前流派”+“当前流派”）.prop（“选中”，模式=“offx”）；
}
}

下面是实现“全部检查”或“全部查看”按钮的HTML：

 <td><a  class='quickButton'>Watch All</a></td>
       <td><input type='checkbox'  id='alls_cur' onclick=\"watchgenre( $user_id,'All','alls', 'offx', 1);\" ></input></td>
       <td><input type='checkbox' $checkname  id='alls_fut' onclick=\"watchgenre( $user_id,'All','alls', 'offx', 2);\" ></input></td>

全看

谢谢你能给我的任何建议

像这样的建议

下面显示了演示中的代码片段。演示显示有5个复选框和1个复选框。选中每个框后，都会触发其div，使其具有彩色背景。取消选中时，背景将变为白色。check all（全选）复选框选中所有其他复选框，并使用以下行触发它们的操作：

$（this.trigger（'change'）。这行代码模拟每个复选框的
.change（）
事件

<div>
    <input type="checkbox" class="chkbox check1"/> Background gray <br/>
</div>
<div>
    <input type="checkbox" class="chkbox check2"/> Background lightgray <br/>
</div>
<input type="checkbox" class="checkAll"/> Check All

$(document).ready(function() {
    $('.checkAll').on('change', function() {
        if($(this).is(':checked')) {
            $('.chkbox').each(function() {
                $(this).prop('checked', true);
                $(this).trigger('change');
            });
        }
    });
    $('.check1').on('change', function() {
        if($(this).is(':checked')) {
            $(this).closest('div').css('background-color', 'gray');
        }
        else {
            $(this).closest('div').css('background-color', 'white');        
        }
    });
    $('.check2').on('change', function() {
        if($(this).is(':checked')) {
            $(this).closest('div').css('background-color', 'lightgray');
        }
        else {
            $(this).closest('div').css('background-color', 'white');        
        }
    });
});


背景灰

背景浅灰色

全部检查
$（文档）.ready（函数（）{
$（'.checkAll'）。在（'change'，function（）上{
如果（$（this）.is（':checked'））{
$（'.chkbox'）。每个（函数（）{
$（this.prop（'checked'，true）；
$（this.trigger（'change'）；
});
}
});
$（'.check1'）。在（'change'，function（）上{
如果（$（this）.is（':checked'））{
$（this）.closest（'div'）.css（'background-color'，'gray'）；
}
否则{
$（this）.closest（'div'）.css（'background-color'，'white'）；
}
});
$（'.check2'）。在（'change'，function（）上{
如果（$（this）.is（':checked'））{
$（this）.closest（'div'）.css（'background-color'，'lightgray'）；
}
否则{
$（this）.closest（'div'）.css（'background-color'，'white'）；
}
});
});

希望这有帮助

顺便说一句，以防您不知道，
.change（）
或
.on（'change'）
是当复选框的状态更改时触发的事件（从选中状态更改为未选中状态，反之亦然）
尝试在jQuery中使用事件（如onclick），如下所示_

$("selector").on("click", callbackOrFunction)

您使用内联JS和
.attr（）
绑定事件处理程序有什么原因吗？使用jQuery的
。click（）
将是一个很好的开始。感谢您的回复！老实说，我不确定我是否可以用“点击”来做我想做的事情。这些复选框（单个和主复选框）作用于页面上的一组按钮，根据是否选中它们来“打开”和“关闭”。这些按钮在按下/取消按下时会改变颜色，而且，重要的是，每次按下/取消按下按钮时都会更新SQL数据库。我可以用jQuery来实现吗？任何指向正确方向的指针都会非常棒。哇，非常感谢你的代码。奇怪的事情：我试过了，它在Firefox中也做了同样的延迟。然后我在Chrome上试用，效果非常好！事实证明，我的网站在Chrome上也很不错，但在Firefox上却不行。我想知道Chrome处理JS的方式有什么不同。我将把它改为使用.change（），就像您所做的那样。再次感谢你的帮助。
$("selector").on("click", callbackOrFunction)