Check to see if atleast one of the check boxes is checked using javascript

JavaScript
1

Hello Folks,

I have 7 or 8 checkboxes. When a user clicks on a button, I want to check to see if atleast one of the checkboxes is checked. Otherwise I want to alert the user to check a box.

<asp:CheckBox ID="CheckBoxAll" runat="server" Text="Select All"  />
                <asp:CheckBoxList ID="CheckBoxListRuns" runat="server"
                    ForeColor="Black" BorderColor="#3333CC">
                  <asp:ListItem>Run today</asp:ListItem>
                  <asp:ListItem>Run tomorrow</asp:ListItem>
                  <asp:ListItem>Never Run</asp:ListItem>
                  </asp:CheckBoxList>

So far this is the code I wrote. Any further help from here is greatly appreciated. Thanks



function check() {

                 var checkboxCollection = document.getElementById('<%=CheckBoxListRuns.ClientID %>').getElementsByTagName('input');

                 for (var i = 0; i < checkboxCollection.length; i++) {
                     //Here I need to put a validation check.
                 }
}
             }
2

What happens when you find that a checkbox is checked? Everything is okay and the function can return without taking any further action.

So inside of the for loop you can have this:


if (checkboxCollection[i].checked) {
    return;
}

After the for loop is finished, that is where you will end up if none of the checkboxes are found to be checked, so you can alert the user there.


window.alert('Please select at least one checkbox.');
3

Paul,

Now, eventhough one checkbox is checked, I get the alert message saying “click atleast one checkbox”. I am sure I am doing something wrong in the return statuement


function PerformChecks() {

                 var vartextboxEOM = document.getElementById('<%= TextBoxPeriod.ClientID%>').value;

                 var vardropdownEOM = document.getElementById('<%= DropDownListEOMDates.ClientID %>');

                 //This is first check
                 if (vartextboxEOM == "" && vardropdownEOM.style.visibility == "hidden") {
                     alert("Enter/Pick the date from textbox");
                 }
                 else { //This is second check

                     var checkboxCollection = document.getElementById('<%=CheckBoxListInstruments.ClientID %>').getElementsByTagName('input');

                     for (var i = 0; i < checkboxCollection.length; i++) {

                     if (checkboxCollection[i].checked)
                        return;
                     else
                         alert("Please select at least one checkbox");
                         return;
                    }
                 }
4

Please go back and read what I said about “After the for loop is finished”

5

Got it Paul. Let me try

6

Paul,

I did exactly the way you said. Now the I get the alert message saying fine. But it still does it’s default behaviour.

Basically I have handled two click events on this button. onclick and OnClientClick events.
First OnClientClick is being fired. that is where the Performchecks javascript function is launched. Though the alert message is showing up, the server event (ButtonRun_Click) is also being launched after OnClientClick. I need to stop this server event in case I get the alert message from OnClientClick.


 <asp:Button ID="ButtonRun" runat="server" Text="Go"
                    onclick="ButtonRun_Click" OnClientClick="PerformChecks();" Width="57px"  />
7

Sadly no. You are doing it while you are still in the loop. as an else part of the if statement.

You need to instead show the alert after the for loop is finished, since that is where you will end up if none of the checkboxes are found to be checked.

8

Paul,

I am doing alert after for loop as shown below:


function PerformChecks() {

                 var vartextboxEOM = document.getElementById('<%= TextBoxPeriod.ClientID%>').value;

                 var vardropdownEOM = document.getElementById('<%= DropDownListEOMDates.ClientID %>');

                 //This is first check
                 if (vartextboxEOM == "" && vardropdownEOM.style.visibility == "hidden") {
                     alert("Enter/Pick the date from textbox");
                 }

                 else { //This is second check

                     var checkboxCollection = document.getElementById('<%=CheckBoxListInstruments.ClientID %>').getElementsByTagName('input');

                     for (var i = 0; i < checkboxCollection.length; i++) {

                         if (checkboxCollection[i].checked)
                             return;
                     }

                     window.alert("Please check atleast one checkbox");

                 }
             }
9

It’s good to know we’ve got the previous issue sorted out.

I don’t know how to deal with ASP issues, so the ASP forum will be able to help you when dealing with things like server events.

10

Thank you so much Paul for your help. I will ask someone in ASP forum how to stop the server event to be fired.

Thanks again