How to check whether the check box inside Gridview Template is Selected or not with Javascript?

Question

I have a gridview which contains one templatefield checkbox to select the data for each row. Here they can select the members from the grid.

 <asp:GridView ID="dgMembers2" runat="server" AllowPaging="True" AllowSorting="True">
                        <HeaderTemplate>
                            <asp:CheckBox ID="chkBxHeader" onclick="javascript:HeaderClick(this);" runat="server"
                                Text="Select All" />
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:CheckBox ID="CheckBox1" runat="server" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    </Gridview>

So, when they select member and click on ADD then its inserting into the database but if they do not select any checkbox from the grid I cannot show any error message. Can anyone suggest please how I can check this with Javascript that whether they have checked at least one checkbox or not and then I want to show

Javascript Alert

I tried a lot but my field is template field so I do not know how to work with it.

Any suggestion will be appreciable.

Answer 1

Use below code to make Select All/UnSelect All

function HeaderClick(CheckBox, gdvClientId) {

var TargetBaseControl =     document.getElementById(gdvClientId);
            var TargetChildControl = 'chkOrder';


            var Inputs = TargetBaseControl.getElementsByTagName('input');


            for (var n = 0; n < Inputs.length; ++n)
                if (Inputs[n].type == 'checkbox' &&                                      Inputs[n].id.indexOf(TargetChildControl, 0) >= 0)
                    Inputs[n].checked = CheckBox.checked;

        }

Call the function from your headertemplate like this HeaderClick(CheckBox, gdvClientId) , gdvClientId is your Gridview ID

Answer 2

maybe you could try add this javascript function to the ADD button onClientClick attribute.

            function tryThis() {
        var rowscount = document.getElementById('<%=yourGridViewID.ClientID%>').rows.length;
        var chkTest = 0;
        for (var i = 0; i < rowscount-1; i++) {
            var chkName = "yourGridViewID_yourCheckBoxID_" + i;
            var chkChecked = document.getElementById(chkName).checked;
            if (chkChecked == true) {
                chkTest = 1;
                break;
            }
        }
        if (chkTest == 0) {
            alert('Nothing Checked');
        }
        else {
            alert('Something Checked');
        }
    }

Hope this helps.

References:

How do I get if a checkbox is checked or not?

ASP.NET GridView row count using Javascript

Answer 3

Add asp.net CustomValidator control, and set js function

HTML Markup:

<asp:CheckBox ID="CheckBox1" runat="server" cssClass="chkd" />

<asp:CustomValidator runat="server" ID="validcontrol" EnableClientScript="true"
ClientValidationFunction="validchkbox">required.</asp:CustomValidator>

JavaScript Function:

function validchkbox(sender, e)
{
    e.IsValid = $(".chkd input:checkbox").is(':checked');
}

Code behind:

if (Page.IsValid)
{
    //  Logic Code here...
}

---

OR

Jquery makes life more easy for developer :

   if ($('.chkd').is(':checked')){
        alert("Heloo Welcome..");
    } 
   else {
          alert("Please select the checkbox.");
        }

DEMO JS FIDDLE

Note: here chkd is your checkbox class name

Answer 4

let your gridview id is gv_test

than

function checkChecked() {
    var count = 0;
    $("#gv_test").find(":checkbox").each(function (i) {
        if ($(this).is(":checked")) {
            count++;
        }
    });
    if (count == 0) {
        alert('your error message');
    }
}

hope this will work. Thank you.