复选框造型与全选功能

Question

使用教程here

造型我的网页上的复选框的jQuery但我意识到，我不能做全选复选框，将选择在我的列表中的所有复选框。它在后端工作（复选框被选中），但它不会显示在我的页面中。

添加了演示来显示我的问题。可能需要移植到你的系统来测试它

Demo

我能加入到jQuery的自定义单选按钮和复选框的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); 
     } 
    ); 
}); 

我所做的？首先，在你的小提琴中，你需要纠正一些语法错误，然后向DOM添加一个插件代码，并将脚本添加到脚本面板，以便在DOM准备就绪时触发它们。 （这是关于jsFiddle，所以你了解它是如何工作的）

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

Answer 2

尝试在全选复选框上使用事件处理，并手动检查javascript中的所有复选框。