CODEWITHSUNDEEP
javascriptjqueryasp.net
asifa
asifa

Reputation: 771

checking one checkbox checks all the checkbox

I want to check all the other checkboxes if one checkbox is checked. My code 

<tr>
    <td class="small"><asp:CheckBox ID="chkReportModuleName" runat="server" name="report"></asp:CheckBox></td>
    <td class="particulrs"></td>
    <td class="small"><asp:CheckBox ID="chkReportAdd" runat="server" name="reports"></asp:CheckBox></td>
    <td class="small"><asp:CheckBox ID="chkReportEdit" runat="server" name="reports"></asp:CheckBox></td>
    <td class="small"><asp:CheckBox ID="chkReportDelete" runat="server" name="reports"></asp:CheckBox></td>
    <td class="small"><asp:CheckBox ID="chkReportView" runat="server" name="reports"></asp:CheckBox></td>
    <td class="small"><asp:CheckBox ID="chkReportPrint" runat="server" name="reports"></asp:CheckBox></td>
    <td class="othr"><span><input type="checkbox" id="chkReportActivity1" name="reports" /></span></td>
</tr>

On check of the checkbox named report.I want to check all the checkboxes with the name reports.

Can someone please help me with this? Thanks

Upvotes: 0

Views: 404

Answers (4)

Imran Rizvi
Imran Rizvi

Reputation: 7438

attach followingfunction in all checkboxes's onclick event (who has name=='report')

function CheckAllReportCheckboxes()
{
    var elm = document.getElementsByTagName("input");
    for (i = 0; i < elm.length; i++) {
        if (elm[i].type == "checkbox" && elm[i].name == 'report') {
                elm[i].checked = 'checked';
        }
    }
}

Remember it will not work for unchecking the checkboxes.

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337700

Try this:

$('input[name="report"]').change(function() {
    $('input[name="reports"]').attr("checked", $(this).is(":checked"));
});

Upvotes: 2

nnnnnn
nnnnnn

Reputation: 150070

OK:

$('input[name="report"]').click(function(){
   $('input[name="reports"]').prop("checked", this.checked);
});

On click of the "report" checkbox, all of the "reports" checkboxes will be set to the same state as "report". If you want it to only work one-way, i.e., if unchecking the "report" checkbox should not uncheck the others, then do this:

$('input[name="report"]').click(function(){
   if (this.checked)
       $('input[name="reports"]').prop("checked", true);
});

The above should go in a document.ready handler and/or in a script block that appears after all of the checkboxes.

If you're using an old version of jQuery you'll need to use .attr() instead of .prop().

Simple demo (also shows how to use document.ready): http://jsfiddle.net/eHLcS/

Upvotes: 2

RohitWagh
RohitWagh

Reputation: 2097

Use this:

$(function(){

    // add multiple select / deselect functionality
    $("#selectall").click(function () {
          $('.case').attr('checked', this.checked);
    });
});

Where #selectall is the id of Your "report" checkbox and .case is the cssclass for all the chekboxes you want to get selected on clicking #selectall

You can also use prop function instead of attr for newer version of jquery

Upvotes: 1

Related Questions