Menu
I have a table with information. The first column of the table have checkboxes. I can add/delete rows with a button by checking the checkboxes. The problem I have now is how do I select or deselect all the checkboxes using the checkbox on the header.
Here is my code:
<HTML> <HEAD> <TITLE> Add/Remove dynamic rows in HTML table </TITLE> <SCRIPT language="javascript"> function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var cell1 = row.insertCell(0); var element1 = document.createElement("input"); element1.type = "checkbox"; element1.name="chkbox[]"; cell1.appendChild(element1); var cell2 = row.insertCell(1); cell2.innerHTML = rowCount; var cell3 = row.insertCell(2); cell3.innerHTML = rowCount; var cell4 = row.insertCell(3); cell4.innerHTML = rowCount; var cell5 = row.insertCell(4); cell5.innerHTML = rowCount; var cell6 = row.insertCell(5); cell6.innerHTML = rowCount; } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=1; i<rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if(null != chkbox && true == chkbox.checked) { table.deleteRow(i); rowCount--; i--; } } }catch(e) { alert(e); } } function checkAll(formname, checktoggle) { var checkboxes = new Array(); checkboxes = document[formname].getElementsByTagName('input'); for (var i=0; i<checkboxes.length; i++) { if (checkboxes[i].type == 'checkbox') { checkboxes[i].checked = checktoggle; } } } </SCRIPT> </HEAD> <BODY> <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> <TABLE id="dataTable" border="1"> <tr> <th><INPUT type="checkbox" name="chk[]"/></th> <th>Make</th> <th>Model</th> <th>Description</th> <th>Start Year</th> <th>End Year</th> </tr> </TABLE> </BODY> </HTML> 
703
Clicking on the master checkbox selects all checkboxes; and unchecking it, deselects all checkboxes.
You can use the jQuery prop() method to check or uncheck a checkbox dynamically such as on click of button or an hyperlink etc. The prop() method require jQuery 1.6 and above.
Actually your checkAll(..) is hanging without any attachment.
1) Add onchange event handler
<th><INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" /> </th> 2) Modified the code to handle check/uncheck
function checkAll(ele) { var checkboxes = document.getElementsByTagName('input'); if (ele.checked) { for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].type == 'checkbox') { checkboxes[i].checked = true; } } } else { for (var i = 0; i < checkboxes.length; i++) { console.log(i) if (checkboxes[i].type == 'checkbox') { checkboxes[i].checked = false; } } } } Updated Fiddle
172
JSBin
Add onClick event to checkbox where you want, like below.
<input type="checkbox" onClick="selectall(this)"/>Select All<br/> <input type="checkbox" name="foo" value="make">Make<br/> <input type="checkbox" name="foo" value="model">Model<br/> <input type="checkbox" name="foo" value="descr">Description<br/> <input type="checkbox" name="foo" value="startYr">Start Year<br/> <input type="checkbox" name="foo" value="endYr">End Year<br/> In JavaScript you can write selectall function as
function selectall(source) { checkboxes = document.getElementsByName('foo'); for(var i=0, n=checkboxes.length;i<n;i++) { checkboxes[i].checked = source.checked; } } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
