multiple-checkbox-select-jqeury

Nearly all the user interfaces i have got developed got that efficiency connected with picking a number of items coming from a number for you to process them or erase them. Even though the super an easy task to carry out that efficiency with Javascript, making use of jQuery with this is actually actual enjoyable. I will disclose an effective rendering connected with introducing a number of checkbox select and also deselect efficiency for you to any kind of web page. We could have the stand using several data inside it and also checkbox with every short period. It will have the select all checkbox in the header with the stand. In the event person select/deselect your selectall checkbox, the many checkbox with stand could possibly get picked or deselected as a result. At this point one more thing you want right here to incorporate is actually, suppose person select the many checkbox one by one then your selectall checkbox must be automatically gets picked. And if person simply click selectall 1st and then unchecks some of the checkbox, then your selectall likewise must be unchecked automatically.

The HTML

<HTML>
<HEAD>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
</HEAD>
<BODY>
    <H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
    <th><input type="checkbox" id="selectall"/></th>
    <th>Cell phone</th>
    <th>Rating</th>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
    <td>BlackBerry Bold 9650</td>
    <td>2/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
    <td>Samsung Galaxy</td>
    <td>3.5/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
    <td>Droid X</td>
    <td>4.5/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
    <td>HTC Desire</td>
    <td>3/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
    <td>Apple iPhone 4</td>
    <td>5/5</td>
</tr>
</table>
</BODY>
</HTML>

The jQuery Code

Add following jQuery code in HEAD section of above HTML

<SCRIPT language="javascript">
$(function(){
    // add multiple select / deselect functionality
    $("#selectall").click(function () {
          $('.case').attr('checked', this.checked);
    });
    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    $(".case").click(function(){
        if($(".case").length == $(".case:checked").length) {
            $("#selectall").attr("checked", "checked");
        } else {
            $("#selectall").removeAttr("checked");
        }
    });
});
</SCRIPT>

Here in above code at line 05, we enroll a handler on click of selectall checkbox. On click of this checkbox, we check/uncheck all checkbox in the datatable.

 

Leave a Reply

Your email address will not be published. Required fields are marked *