Question

Was styling the checkboxes of my webpage with jquery using the tutorial here

But i realized that I could not do SelectAll checkbox that will select all the checkboxes in my list. It works in the backend (the checkboxes are selected) but it does not show in my page.

Added a demo to show my problem. May need to port to your system to test it out

Demo

what can I add to the jQuery Custom Radio-buttons and Checkbox javascript file in the to achieve the select all checkbox function

Thank you!

Answer 1

You can try this 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);
        }
    );
});

What I’ve done? First, in your fiddle you need to correct some syntax errors, then add a plugin code to the DOM, and you scripts to the script panel, so they will fire when DOM is ready. (This is all about jsFiddle, so you to understand how it works)

About actually your code, you attached click-handlers (.toggle()) to the checkbox element. But click event does not fire on it. Script simply changed the property of the checkbox, but there is no click. So you need to attach these handler to the element wish user actually clicks, that is square icon. (I added an id="sel_all_lbl" to it)