Tutorial # 3: jQuery-style Checkboxes

Table of contents

Tutorial # 3: jQuery-style Checkboxes

Javascript for managing a checkbox

Step 1: Declare the checkbox (CGI form field in HTML):

        <td><input type="checkbox" id="ignore_role" value="1" checked="checked">Ignore</td>

Notes:

# 1: I wanted the checkboxes (there are 4 in the app) to be checked by default.

# 2: I wanted each to return a Boolean value to the CGI script on the server.

# 3: I have the word 'Ignore' beside each checkbox, since these checkboxes are each accompanied by a menu, and the user can decide that no matter what value is chosen in the menu, that value can be optionally ignored by the code on the server.

Step 2: Tell jQuery how to react to a click on any checkbox (Javascript):

        $(document).ready(function()
        {
                $("input:checkbox").each(function()
                {
                        var $t = $(this);

                        $t.change(function()
                        {
                                $t.val() == 1 ? $t.val(0) : $t.val(1); // 2 x '='. See below.
                        });
                });

                ...
        }

Notes:

# 1: What I'm doing here is controlled what value is sent to the server when the form is submitted.

# 2: The browser takes care of displaying or hiding the tick mark in the checkbox.

Step 3: Turn a span into a jQuery-style button (Javascript):

HTML:

        <span id="generate_report_button">Generate report</span>

Javascript:

        $(document).ready(function()
        {
                $("#generate_report_button").button();
                $("#generate_report_button").click(function(e)
                {
                        generate_report();
                });

                ...
        }

Step 4: Use ajax to send the value of each checkbox to the server (Javascript):

        function generate_report()
        {
                $.ajax
                ({
                        data:
                        {
                                communication_type_id:     $("#report_communication_type_id").val(),
                                gender_id:                 $("#report_gender_id").val(),
                                ignore_communication_type: $("#ignore_communication_type").val(),
                                ignore_gender:             $("#ignore_gender").val(),
                                ignore_role:               $("#ignore_role").val(),
                                ignore_visibility:         $("#ignore_visibility").val(),
                                report_entity_id:          $("#report_entity_id").val(),
                                report_id:                 $("#report_id").val(),
                                role_id:                   $("#report_role_id").val(),
                                sid:                       $("#sid").val(),
                                visibility_id:             $("#report_visibility_id").val()
                        },
                        dataType: "html",
                        type: "POST",
                        url:  "<: $self_url :>/Report/display",
                        success: function(html, status, jqObject)
                        {
                                $("#report_result")
                                .empty()
                                .append(html);
                        },
                        error: function(jqObject, status, error)
                        {
                                ajax_error("Cannot generate report", jqObject, status, error);
                        }
                });
        }

Notes:

I'm ignoring the error handing code you would normally add to this function.

Traps

As you know, jQuery is full of astonishing and infuriating traps.

Here are some connected with checkboxes.

Responding to clicks

This does not work:

        $(document).ready(function()
        {
                $("input:checkbox").each(function()
                {
                        var $t = $(this);

                        $t.change(function()
                        {
                                $t.val() === 1 ? $t.val(0) : $t.val(1); // 3 x '='.
                        });
                });

                ...
        }

Neither does this:

        $(document).ready(function()
        {
                $("input:checkbox").each(function()
                {
                        this.change(function()
                        {
                                this.val() == 1 ? this.val(0) : this.val(1);
                        });
                });

                ...
        }

Neither does this:

        $(document).ready(function()
        {
                $("input:checkbox").each(function()
                {
                        var $t = $(this);

                        $t.change(function()
                        {
                                $t.checked ? $t.val(0) : $t.val(1);
                        });
                });

                ...
        }

Nor can you fiddle the 'checked' attribute of the checkbox in order to manipulate the value you want to send to the server. Hence don't waste your time with any of these:

        $t.attr('checked', 'checked');
        $t.removeAttr('checked');

There may, of course, be other circumstances where these last 2 are appropriate.

Links

My home page

All tutorials (Includes references)

POD source for this tutorial