How to toggle checkall uncheckall asp.net checkboxlist javascript?

Hi,

I have one checkbox 'check all' which is used to check all the checkboxes and 'check all' text changed to 'uncheck all'. Uncheck all text uncheck al checkboxes and 'uncheck all' text change to 'check all'.

 <form id="form1" runat="server" >
            <asp:CheckBox  ID="check All" CssClass="statesettings" runat="server"   Text="Check All"   />
                                                     
        <asp:CheckBoxList ID="cblStates" runat="server"             DataSourceID="StatesDataSource" DataTextField="StateName"  
            DataValueField="State_ID"  RepeatColumns=4 RepeatDirection="Vertical" RepeatLayout="Table" Width="475px"/>    
          <asp:Button ID="CloseBtn" runat="server" Text="Submit" CssClass="close"  OnClick="Close_Click"   />
</form>
Saroj13Asked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
"check All" is not a valid ID, space is not allowed, correct it to checkAll
add this in the header section of your page :

<script type="text/javascript">
$(document).ready(function() {
     $("#<%= checkAll.ClientID =>").change(function(evt) {
          evt.preventDefault();
          var l = $(this).is(":checked")?"Uncheck all":"Check all";
          $("label[for='#<%= checkAll.ClientID =>']").text(l);
     });
})
</script>

Open in new window

0
 
abolinhasCommented:
HTML:
<input type="button" name="ca_v2_on" value="JQuery Check All myCB" onclick="jqCheckAll('myForm', 'myCB', 1);"/>
2<input type="button" name="ca_v2_off" value="JQuery Uncheck All myCB" onclick="jqCheckAll('myForm', 'myCB', 0);"/>

Jquery:
function jqCheckAll( id, name, flag )
{
    if (flag == 0)
    {
        $("form#" + id + " INPUT[@name=" + name + "][type='checkbox']").attr('checked', false);
    }
    else
    {
        $("form#" + id + " INPUT[@name=" + name + "][type='checkbox']").attr('checked', true);
    }
}

Open in new window


Source & Demo:
http://www.iknowkungfoo.com/blog/index.cfm/2008/7/9/Check-All-Checkboxes-with-JQuery
0
 
Saroj13Author Commented:
thanks. I tried first solution and it says server tag is not well formed. i have put code inside <head> block.

I want only one checkbox that will do toggle checkall and uncheckall. Toggle will also change the text from checkall to unceckall and viceversa.
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
leakim971PluritechnicianCommented:
<script type="text/javascript" language="javascript">
$(document).ready(function() {
     $("#<%= checkAll.ClientID =>").change(function(evt) {
          evt.preventDefault();
          var l = $(this).is(":checked")?"Uncheck all":"Check all";
          $("label[for='#<%= checkAll.ClientID =>']").text(l);
     });
})
</script>
0
 
leakim971PluritechnicianCommented:
<< it >> ?
0
 
Saroj13Author Commented:
Its not working. checkAll checkbox is not checking all the states checkboxes

<script type="text/javascript" language="javascript">
$(document).ready(function() {
     $('<%= checkAll.ClientID %>').change(function(evt) {
          evt.preventDefault();
          var l = $(this).is(":checked")?"Uncheck all":"Check all";
          $("label[for='<%= checkAll.ClientID %>']").text(l);
     });
})
</script>


 <form id="form1" runat="server" >
        <asp:CheckBox ID="checkAll" runat="server"   Text="check all" />
 
     <asp:FormView id="InsertScriptFormView1"  Runat="Server" DataSourceID="GetDetailDataSource"
           DefaultMode="Insert" Font-Size=Small Font-Names="Arial" Width="100%"
           >  
               <InsertItemTemplate>
           
                                                             
        <asp:CheckBoxList ID="cblStates" runat="server" CssClass="statesettings"
            DataSourceID="StatesDataSource" DataTextField="StateName"  
            DataValueField="State_ID"  RepeatColumns=4 RepeatDirection="Vertical" RepeatLayout="Table" Width="475px"/>    
            <br/>
          <asp:Button ID="CloseBtn" runat="server" Text="Submit" CssClass="close"  OnClick="Close_Click"   />
               
       
   
  </InsertItemTemplate></asp:FormView>
</form>
0
 
leakim971PluritechnicianCommented:
the code provided only update the label... it don't do this job?
0
 
Saroj13Author Commented:
hi,

Please modify the code: Below code does:
1. Check All checkbox click check all the state checkboxes
2. CheckAll checkbox uncheck will uncheck all the state checkboxes.

Please update the code that checkall checkbox text change to uncheckall when all the checkboxes are selected.
function SelectAllCheckboxes(spanChk, str) {
          // Added as ASPX uses SPAN for checkbox     
          var oItem = spanChk.children;
          var theBox = (spanChk.type == "checkbox") ? spanChk : spanChk.children.item[0];
          var control;
          xState = theBox.checked;
          elm = theBox.form.elements;
          for (i = 0; i < elm.length; i++)
              if (elm[i].type == "checkbox" && elm[i].id != theBox.id) {
                  control = elm[i].id.indexOf(str);
                  if (elm[i].checked != xState && control != -1) {
                      elm[i].click();
                  }
              }

             
          }

<form id="form1" runat="server" method="post" action=''>
    <p style="text-align:left; margin-left:20px;">
        <asp:CheckBox  ID="checkAll"  runat="server" onclick="javascript:SelectAllCheckboxes(this,'cblStates');"             Text="Check All"   /> 
   </p>
 
     <asp:FormView id="InsertScriptFormView1"  Runat="Server" DataSourceID="GetDetailDataSource"
           DefaultMode="Insert" Font-Size=Small Font-Names="Arial" Width="100%" 
           >  
               <InsertItemTemplate>
           
                                                             
        <asp:CheckBoxList ID="cblStates" runat="server" CssClass="statesettings" 
            DataSourceID="StatesDataSource" DataTextField="StateName"  
            DataValueField="State_ID"  RepeatColumns=4 RepeatDirection="Vertical" RepeatLayout="Table" Width="475px"/>     
            <br/>
          <asp:Button ID="CloseBtn" runat="server" Text="Submit" CssClass="close"  OnClick="Close_Click"   />
                
        
    
  </InsertItemTemplate></asp:FormView>

Open in new window

0
 
leakim971PluritechnicianCommented:
You did not answer my question... Please confirm the code provided change the label.THANKS
0
 
Saroj13Author Commented:
This is my final code. Please change the checkbox text checkall to uncheckall in javascript when all the checkboxes are checked.
function SelectAllCheckboxes(spanChk, str) {
          // Added as ASPX uses SPAN for checkbox     
          var oItem = spanChk.children;
          var theBox = (spanChk.type == "checkbox") ? spanChk : spanChk.children.item[0];
          var control;
          xState = theBox.checked;
          elm = theBox.form.elements;
          for (i = 0; i < elm.length; i++)
              if (elm[i].type == "checkbox" && elm[i].id != theBox.id) {
                  control = elm[i].id.indexOf(str);
                  if (elm[i].checked != xState && control != -1) {
                      elm[i].click();
                  }
              }

             
          }

<form id="form1" runat="server" method="post" action=''>
    <p style="text-align:left; margin-left:20px;">
        <asp:CheckBox  ID="checkAll"  runat="server" onclick="javascript:SelectAllCheckboxes(this,'cblStates');"             Text="Check All"   /> 
   </p>
 
     <asp:FormView id="InsertScriptFormView1"  Runat="Server" DataSourceID="GetDetailDataSource"
           DefaultMode="Insert" Font-Size=Small Font-Names="Arial" Width="100%" 
           >  
               <InsertItemTemplate>
           
                                                             
        <asp:CheckBoxList ID="cblStates" runat="server" CssClass="statesettings" 
            DataSourceID="StatesDataSource" DataTextField="StateName"  
            DataValueField="State_ID"  RepeatColumns=4 RepeatDirection="Vertical" RepeatLayout="Table" Width="475px"/>     
            <br/>
          <asp:Button ID="CloseBtn" runat="server" Text="Submit" CssClass="close"  OnClick="Close_Click"   />
                
        
    
  </InsertItemTemplate></asp:FormView>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.