Solved

.Net Checkboxlist select all javascript

Posted on 2008-10-13
5
709 Views
Last Modified: 2012-06-27
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
0
Comment
Question by:nikdonovanau
  • 2
  • 2
5 Comments
 
LVL 16

Accepted Solution

by:
Gyanendra Singh earned 500 total points
ID: 22708725
<script language="javascript" type="text/javascript">function Select(Select){
for (var n=0; n < document.forms[0].length; n++) if (document.forms[0].elements[n].type==checkbox)
document.forms[0].elements[n].checked=Select; return false; }</script>
Select <a href="#" onclick="javascript:Select(true)">All</a> | <a href="#" onclick="javascript:Select(false)">None</a>
0
 
LVL 1

Author Closing Comment

by:nikdonovanau
ID: 31505782
Love your work

Thanks for the fast response. Worked perfectly
0
 
LVL 5

Expert Comment

by:varungd
ID: 22709038
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

0
 
LVL 16

Expert Comment

by:Gyanendra Singh
ID: 22709112
your welcome
0
 
LVL 5

Expert Comment

by:varungd
ID: 22709758
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

0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question