JQuery Forms Checkbox Selected or Unselected All 2

From CoderLearner
Jump to: navigation, search

Description

Select or Deselect using a single toggle checkbox. By using the single checkbox to handle the select and deselect all the checkbox elements requires the toggle switch states from check or uncheck states. More, whenever the checkbox element is checked, the toggle needs to change state as well when all the checkboxs were selected.

Example 1

<!DOCTYPE html>
<html>
    <head>
        <title>Checkbox Button</title>
        <script type="text/javascript" src="/client/jquery/jquery-1.7.1.min.js"></script>
        <style>
            .select_all, .unselect_all { display:none;}
            .jsEnable {display:inline}

            ul {
                list-style: none;
            }
        </style>
        <script>
            $().ready(function() {
                // check for the js enable
                $('#fruit_master  #idselect_option').addClass('jsEnable');

                // to make life easy, I assign the checkbox to the variables
                // this check_box_list is the list that need to work with
                var check_box_list = $('input[name="fruits"]:checkbox');
                // check_option is the checkbox selection and deselection
                var check_option = $('#fruit_master  #idselect_option');

                // check_option in the change status
                // when checked, all the check_box_list checked
                // when not checked, all the check_box_list unselected
                check_option.change(function() {

                    if (this.checked)
                    {
                        check_box_list.attr('checked', 'checked');

                    }
                    else {
                        check_box_list.removeAttr('checked');
                    }
                });
                //this implement the check_box_list to the check_option
                check_box_list.change(function() {
                    // check when the check box list checked
                    if (this.checked) {
                        // if the check box list is all checked
                        // the check_option should be checked
                        if (check_box_list.length === check_box_list.filter(':checked').length) {
                            check_option.attr('checked', 'checked');
                        }
                    }
                    else {
                        check_option.removeAttr('checked');
                    }
                    //this immediately execute the .change() event for each check box.
                }).eq(0).trigger('change');
            });
        </script>

    </head>
    <body>
        <div id="fruit_master">
            <input type="checkbox" name="select_option" id="idselect_option" />
            <label for="idselect_option">Select All</label>
            <ul>
                <li>
                    <input type="checkbox" name="fruits" value="apple" id="appleid" />
                    <label for="appleid">Apple</label>
                </li>
                <li>
                    <input type="checkbox" name="fruits" value="banana" id="bananaid" />
                    <label for="bananaid">Banana</label>
                </li>

                <li>
                    <input type="checkbox" name="fruits" value="coconut" id="coconutid"/>
                    <label for="coconutid">Coconut</label>
                </li>
                <li>
                    <input type="checkbox" name="fruits" value="mango" id="mangoid"/>
                    <label for="mangoid">Mango</label>
                </li>
                <li>
                    <input type="checkbox" name="fruits" value="Orange" id="orangeid" />
                    <label for="orangeid">Orange</label>
                </li>
            </ul>
        </div>
    </body>
</html>