Member Avatar for srinukatkam

Hi i want to need javascript using datagrid, for example i have a datagrid and in datagrid above two check boxes 1)checked and 2) unchecked .In datagrid also 5 checkboxes is there ,if i clicked checked all checkboxes will select and if i'll clicked unchecked all unselect checkboxes will select ple any one help me (for examlple yahoo mail if we'll select button all will select like this )

  • 2 Contributors
  • 1 Reply
  • 221 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by aravelli

Dani AI

Generated

A simple, robust pattern is to give all row checkboxes a common class and let one control outside the grid set their checked state. The code posted by works but has two identical "checkall" checkboxes and relies on scanning the whole form, which can accidentally toggle the controller itself or unrelated checkboxes. A clearer solution uses a single master control (or two buttons: "Select all" / "Clear all") and a class or container-scoped selector for the rows.

Example (unobtrusive, avoids toggling the controller itself):

<input id="selectAll" type="checkbox"> Select all

<!-- each row checkbox gets the class "rowCheck" -->
<input class="rowCheck" type="checkbox">
<input class="rowCheck" type="checkbox">

<script>
function setAll(checked) {
  var boxes = document.querySelectorAll('input.rowCheck[type="checkbox"]');
  for (var i = 0; i < boxes.length; i++) boxes[i].checked = checked;
}

document.getElementById('selectAll').addEventListener('change', function () {
  setAll(this.checked);
});
</script>

Notes and troubleshooting:

  • For server-side grids (ASP.NET DataGrid/DataList/GridView), add the class to the checkbox in RowDataBound so client selectors can find them despite dynamic ClientIDs.
  • If the grid is updated via AJAX, reattach handlers or delegate to a static container element after each update.
  • Prefer buttons/links for explicit "select" and "clear" actions rather than two checkboxes that can be confusing.
  • Accessibility: include labels and update aria-checked when doing custom controls so screen readers announce the state.

This keeps the controller separate from the row inputs, avoids name collisions, and is easy to adapt whether the page is old-school form-based or uses partial updates like UpdatePanel/AJAX.

Member Avatar for aravelli 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript">
      function checkAll(theElement) {
     var theForm = theElement.form, z = 0;
     for(z=0; z<theForm.length;z++){
      if(theForm[z].type == 'checkbox' && theForm[z].name != 'checkall'){
      theForm[z].checked = theElement.checked;
      }
     }
    }
 </script>
 </HEAD>
 <BODY>
<form><input type="checkbox" name="check1"/>
<br/>
<input type="checkbox" name="check2"/>
<br/>
<input type="checkbox" name="check3"/>
<br/>
<input type="checkbox" name="check4"/>
<br/>
<input type="checkbox" name="check5"/>
<br/>
<input type="checkbox" name="checkall" onclick="checkAll(this);"/>Check All
<input type="checkbox" name="checkall" onclick="checkAll(this);"/>Uncheck All</form>
</BODY>
</HTML>

I HOPE THIS MAY HELP YOU

Edited by mike_2000_17 because: Fixed formatting
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.