asked on

.Net Checkboxlist select all javascript

Hi experts,

How do I achieve the following.

I have a checkbox list in .net
aspx

<asp:CheckBoxList ID="lstDays" runat="server" Height="185px" onclick="check(this)">
<asp:ListItem Value="0" Selected="True" runat="server">All</asp:ListItem>
<asp:ListItem Value="1">Monday</asp:ListItem>
<asp:ListItem Value="2">Tuesday</asp:ListItem>
<asp:ListItem Value="3">Wednesday</asp:ListItem>
<asp:ListItem Value="4">Thursday</asp:ListItem>
<asp:ListItem Value="5">Friday</asp:ListItem>
<asp:ListItem Value="6">Saturday</asp:ListItem>
<asp:ListItem Value="7">Sunday</asp:ListItem>
</asp:CheckBoxList>

I want to be able to select all that will check all the boxes, or if i select one or two days the all box gets unchecked.

What is the right way about coding the javascript.

I tried <script>function check(sel){alert(sel.selectedIndex);
}</script> to get started but I get undefined

Thanks experts

ASKER CERTIFIED SOLUTION

Gyanendra Singh

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

nikdonovanau

ASKER

Love your work

Thanks for the fast response. Worked perfectly

varungd

Try this

<script language="javascript">
       function check() 
       {
          debugger
         
          if(event.srcElement.id == "lstDays_0")
            {
	            if(event.srcElement.checked == true)
	            {
	            for(var i=0;i<lstDays.rows.length+1;i++)
	              {
	                 if( document.forms[0].elements[i].type =="checkbox" )
                        {
	                        if(document.forms[0].elements[i].checked== false)
	                        {
		                       document.forms[0].elements[i].checked =true;
	                        }
                        }
	              }
			
	            }
	            
	            else
	            {
	              for(var i=0;i<lstDays.rows.length+1;i++)
	              {
	                 if( document.forms[0].elements[i].type =="checkbox" )
                        {
	                        if(document.forms[0].elements[i].checked== true)
	                        {
		                       document.forms[0].elements[i].checked =false;
	                        }
                        }
	              }
	            
	            }
            }
     
       }
 
    </script>
 
 
 
 <asp:CheckBoxList ID="lstDays" runat="server" Height="185px" onclick="check()">
       <asp:ListItem Value="0" Selected="True" >All</asp:ListItem>
            <asp:ListItem Value="1">Monday</asp:ListItem>
            <asp:ListItem Value="2">Tuesday</asp:ListItem>
            <asp:ListItem Value="3">Wednesday</asp:ListItem>
            <asp:ListItem Value="4">Thursday</asp:ListItem>
            <asp:ListItem Value="5">Friday</asp:ListItem>
            <asp:ListItem Value="6">Saturday</asp:ListItem>
            <asp:ListItem Value="7">Sunday</asp:ListItem>
        </asp:CheckBoxList>

Open in new window

Gyanendra Singh

your welcome

varungd

Try this . Previous one is missing some lines......

<script language="javascript">
       function check() 
       {
          
         
          if(event.srcElement.id == "lstDays_0")
            {
	            if(event.srcElement.checked == true)
	            {
	            for(var i=0;i<lstDays.rows.length+1;i++)
	              {
	                if( document.forms[0].elements[i].type =="checkbox" )
	                
                        {
	                        if(document.forms[0].elements[i].checked== false)
	                        {
		                       document.forms[0].elements[i].checked =true;
	                        }
                        }
	              }
			
	            }
	            
	            else
	            {
	              for(var i=0;i<lstDays.rows.length+1;i++)
	              {
	                 if( document.forms[0].elements[i].type =="checkbox" )
                        {
	                        if(document.forms[0].elements[i].checked== true)
	                        {
		                       document.forms[0].elements[i].checked =false;
	                        }
                        }
	              }
	            
	            }
            }
            else
            {
                for(var i=0;i<lstDays.rows.length;i++)
	              {
	                 if( document.forms[0].elements[i].type =="checkbox" )
                        {
	                                if(document.forms[0].elements[i+1].checked== false)
	                                {
		                              
		                                document.forms[0].elements['lstDays_0'].checked = false;
		                                 break;
	                                }
	                                else
	                                {
	                                    
	                                    document.forms[0].elements['lstDays_0'].checked = true;
	                                }
                        }
	              }
            
            }
     
       }
 
    </script>
 
 
 
 
 <asp:CheckBoxList ID="lstDays" runat="server" Height="185px" onclick="check()">
       <asp:ListItem Value="0" >All</asp:ListItem>
            <asp:ListItem Value="1">Monday</asp:ListItem>
            <asp:ListItem Value="2">Tuesday</asp:ListItem>
            <asp:ListItem Value="3">Wednesday</asp:ListItem>
            <asp:ListItem Value="4">Thursday</asp:ListItem>
            <asp:ListItem Value="5">Friday</asp:ListItem>
            <asp:ListItem Value="6">Saturday</asp:ListItem>
            <asp:ListItem Value="7">Sunday</asp:ListItem>
        </asp:CheckBoxList>

Open in new window