Special Offer - Get $90 Discount and Host Your Dream Web Site @ Dreamhost for 1 Year Click Here. Promo Code SLJ345
Back To Top
WordPress Web Application Development
Develop Powerfull Web Applications Using Cutting Edge WordPress Development Techniques

Jquery Checkbox Examples

on 2011/04/17 10:07 AM stored in: Uncategorized and tagged:
This code snippet will show you how to manipulate checkboxes using jquery.

Jquery Checkbox Examples Overview

 

Get checked checkboxes

Loops through all the checked checkboxes and adds checkbox value to an array using jquery :checkbox selector.

                        $(":checkbox:checked").each(
                            function() {
                                $(this).val();
                            }
                        );
    

Get unchecked checkboxes

Loops through all the unchecked checkboxes and adds checkbox value to an array.

                        $(":checkbox").not(:checked).each(
                            function() {
                                $(this).val();
                            }
                        );
    

Get checkboxes inside specific container

Loops through all the checkboxes inside given container(Ex:div) and adds checkbox value to an array.

                        $("div :checkbox").each(
                            function() {
                                $(this).val();
                            }
                        );
    

Check all checkboxes

Loops through all the checkboxes and marks all the checkboxes as checked using jquery loop.

                        $(":checkbox").each(
                            function() {
                               $(this).attr('checked', true);
                            }
                        );
    

Uncheck all checkboxes

Loops through all the checkboxes and marks all the checkboxes as unchecked.

                        $(":checkbox").each(
                            function() {
                               $(this).attr('checked', false);
                            }
                        );
    

Validate checkbox is checked

Checks if a given checkbox is checked.

                        if($('#checkboxid').is(':checked')) {
                            alert($('#checkboxid').val());
                        }
    

Toggle checkbox

Toggles the display of a container based on checkbox select.


                        
                        
This is the content of toggle div.
            $('#toggleCheck').change(function(){
                $('#toggleDiv').toggle();
            });
        

    

Highlight Table row on check checkbox

Create a table with a checkbox for each row. Table row will be highlighted when checkbox is checked.


            
                            .tabledata{
                                background-color: #cfcfcf;
                            }
                            .highlighttabledata{
                                background-color: #f00;
                            }
                       
    
                        
 Name
Mark
Smith
John
Adams
James
        
            // Highlight Table row on check checkbox
            $('.tabledata').change(function(){
                var id = $(this).attr('id');
                var rowId = "#"+id.replace("chk", "tr");

                $(rowId).toggleClass("highlighttabledata");

            });


    

Disable and Enable Checkbox List On Single Checkbox

Toggle disable and enable attribute on list of checkboxes based on a single checkbox click event.


               
        
                        $("#single_check").click(
                            function() {
                               $(".list_check").each(
                                    function() {
                                       this.disabled = !this.disabled;
                                    }
                                );
                            }
                        );
    

Demo and Download

Download EBook Version
Download Jquery Checkbox Examples
Jquery Checkbox Examples Demo

Leave a Reply

Follow Us On Facebook