CODEWITHSUNDEEP
javascripthtmlcss
Wilson
Wilson

Reputation: 231

Checkbox Styling with SelectAll Function

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!

Upvotes: 0

Views: 150

Answers (2)

d.k
d.k

Reputation: 4470

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)

Upvotes: 1

Aravindhan
Aravindhan

Reputation: 3626

Try to use event handling on the select all checkbox and manually check all the checkboxes from javascript.

Upvotes: 0

Related Questions