Check box in gridview with button

Question

In button click event how can I check all check boxes in gridview? I dont need header checkbox.

Please provide your knowledge

awaiting your response....

Thanks

Answer 1

C# Let's say you have a check all button

<asp:CheckBox ID="chkSelectAll" runat="server" Text="SelectAll" 
AutoPostBack="true" OnCheckedChanged="chkSelectAll_CheckedChanged" />

and in that click event you would do something like:

protected void chkSelectAll_CheckedChanged(object sender, EventArgs e)
{
   CheckBox chk;   //assuming your gridview id=GridView1

   foreach (GridViewRow rowItem in GridView1.Rows) 
  {   
     chk = (CheckBox)(rowItem.Cells[0].FindControl("chk1")); 
     chk.Checked =((CheckBox)sender).Checked;
   }
}

javascript approach:

<script language="javascript">

function SelectAllCheckboxes(spanChk){

// Added as ASPX uses SPAN for checkbox
var oItem = spanChk.children;
var theBox= (spanChk.type=="checkbox") ? 
    spanChk : spanChk.children.item[0];
xState=theBox.checked;
elm=theBox.form.elements;

for(i=0;i<elm.length;i++)
  if(elm[i].type=="checkbox" && 
          elm[i].id!=theBox.id)
  {
    //elm[i].click();
   if(elm[i].checked!=xState)
     elm[i].click();
   //elm[i].checked=xState;
  }
 }
</script>

Checkbox field as so:

<asp:CheckBox ID="chkAll" runat="server" Text="SelectAll" 
onclick="javascript:SelectAllCheckboxes(this);" />

Answer 2

<input id="btncheckall" type="button" value="select all" />

add click event handler to button above (with jQuery)

<script type="text/javascript">
  $(function(){

    $("#btncheckall").click(function(){

      $("#gridview input:checkbox").attr("checked","checked");

    });

  });
</script>

or you can use checkbox. this is a checkbox outside gridview

<input id="checkall" type="checkbox" />

add change event handler to checkbox above (with jQuery)

<script type="text/javascript">
  $(function(){

    $("#checkall").change(function(){

      $("#gridview input:checkbox").val( $(this).val() );

    });

  });
</script>

Answer 3

If you're using jquery you could use the $('input:checkbox') selector so something like

<script type="text/javascript">
  $(function() {
    $('#NameOfButtonToSelectAll').click( function() {
      $('input:checkbox').each( function() {
        this.checked = !this.checked;
      });
    });
  });
</script>

Answer 4

Hai Dominic,
If you want javascript look at this http://www.4guysfromrolla.com/articles/052406-1.aspx#postadlink

or http://stackoverflow.com/questions/1921347/check-box-in-gridview-with-button

Answer 5

Jquery can make this easier. Hook into the external boxes onslected event, and inside there iterate the grid boxes selecting them all.

This is a great example of the evils of asp.net and how it's use by new developers really cripples them into thinking that all processing and interaction takes place server side, and all sorts of crazy hacks take place to maintain this illusion. It's backwards and insane.

Answer 6

Try this:

<asp:GridView ID="GridView1" runat="server">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate><asp:CheckBox ID="SelectUnSelectAllCheckBox" runat="server" /></HeaderTemplate>
            <ItemTemplate><asp:CheckBox ID="SelectCheckBox" runat="server" /></ItemTemplate>
        </asp:TemplateField>
        <!-- Other columns are omitted -->
    </Columns>
</asp:GridView>

---

<script type="text/javascript">
    $(document).ready(function(e) {
        $("input[id$='SelectUnSelectAllCheckBox']").change(function() {
            $("input[id$='SelectCheckBox']").attr("checked", this.checked);
        });
    });
</script>

Answer 7

Kindly check it out and let me know when you got it worked.

Using Javascript :

http://wiki.asp.net/page.aspx/281/check-uncheck-checkboxes-in-gridview-using-javascript/

Using Serverside Script: (VB.Net)

http://aspnet.4guysfromrolla.com/articles/052406-1.aspx

Answer 8

Using jQuery:

$('#SelectAll').click(function(){
  var checked = $(this).is(':checked');
  var allCheckboxes = $('table input:checkbox');
  if(checked)
      allCheckboxes.attr('checked','checked');
  else
      allCheckboxes.removeAttr('checked');
});

You probably want to change the selectors, assuming you have a class for your grid and checkbox.

Answer 9

Assign a class to all your grid row check boxes and use the below script to get them all.

function getElementsByClass(searchClass,node,tag) {
    var classElements = new Array();
    if ( node == null )
        node = document;
    if ( tag == null )
        tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
                classElements[j] = els[i];
                j++;
        }
    }
    return classElements;
}

And you've to call it this way:

var messages = getElementsByClass("childbox");

Assign a class childbox to grid row child box.

document.getElementById("parentbox").onclick  = function() {
for(var index=0; index < messages.length; index++) {
 // prompt the content of the div
 //message[index].checked = (message[index].checked) ? false : true;
}
}

you'll assign the parentbox class to the parent checkbox which is in grid header.

You don't need to define them - parentbox and childbox.