javascript - 使用 SelectAll 函数的复选框样式

Question

正在使用教程 here 使用 jquery 为我的网页设置复选框样式

但我意识到我无法执行 SelectAll 复选框来选中我列表中的所有复选框。它在后端工作(选中复选框)但它不显示在我的页面中。

添加了一个演示来展示我的问题。可能需要移植到您的系统进行测试

Demo

我可以在jQuery Custom Radio-buttons and Checkbox javascript文件中添加什么来实现全选复选框功能

谢谢!

Answer 1

你可以试试这个FIDDLE :

$(function () {
    var $chbxs = $('.checkbox');
    $('#sel_all_lbl').toggle(
        function() {
            $chbxs.css('background-position', '50% -50px');
            $('#checkboxall .truefalse').prop('checked', true);
        },
        function() {
            $chbxs.css('background-position', '50% 0px');
            $('#checkboxall .truefalse').prop('checked', false);
        }
    );
});

我做了什么？首先，在您的 fiddle 中，您需要更正一些语法错误，然后将插件代码添加到 DOM，然后将脚本添加到脚本面板，以便在 DOM 准备就绪时触发它们。 (这都是关于 jsFiddle 的，所以你要了解它是如何工作的)

实际上关于您的代码，您将点击处理程序 (.toggle()) 附加到复选框元素。但是点击事件不会触发它。脚本只是更改了复选框的属性，但没有单击。因此，您需要将这些处理程序附加到希望用户实际点击的元素，即方形图标。 (我添加了一个 id="sel_all_lbl" 到它)