Implement a select all checkbox in JSP with javascript

Question

Hello everyone I am trying to implement a select all check box. So when it is checked all other checkboxes will be checked. I have used this url for help How to implement "select all" check box in HTML?

I have a java class that will build a datagrid based on some factors when the jsp is called.

I have written this code so far

javascript code

function toggle(source) {
  checkboxes = document.getElementsByName('chk');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}

my check box for select all

<th><b><dmf:checkbox name="ABoxes" onclick = 'toggle(this)' id="allABoxes" runatclient="true"/></b></th>

the checkbox that will be created when the data grid is created.

 <td><dmf:checkbox name='chk' datafield='parent_id'/>

Currently when I select the check all check box nothing happens. I have gotten the java script to work if I change the dmf:button to input type="checkbox" but then it crashes some of my other code so I must leave them at dmf:button.

Thank you everyone for any help it is greatly appreciated. If some of what I have written doesn't make sense just let me know and I will try to clearify any questions.

Have you explored the generated html? Is still the name `chk` after rendering? I'm not familiar with the tools you're using but it's common that the name/id changes from server to client — Claudio Redi, Aug 05 '14 at 21:18
Your toggle function looks perfect so there may be a mis-match in the HTML that is being output by the JSP. What is the HTML for the checkboxes on client-side (in the browser)? Most importantly, do the checkboxes all contain the attribute `name="chk"` and are there also no other elements with that name? — Joseph Myers, Aug 05 '14 at 21:19
To Claudio Redi thanks for the response! How would I check if the name/id changes on the client side? — Steven, Aug 05 '14 at 21:53
Thank you for the reply too Joseph! There are no other elements with the attribute name="chk". — Steven, Aug 05 '14 at 21:58
@Steven right click the element and select `inspect the element` in FF and Chrome. Use `developer tools` in case if you are using IE. Go handy with tools like **firebug**. — Vinoth Krishnan, Aug 06 '14 at 09:45
Thanks for the tip Vinoth!! When I right click it the element is And when I select another one the name is SO it looks like the name becomes RecycleBin_Chk_X where X is different for each element — Steven, Aug 06 '14 at 14:12
Is there a way to add code to the function so it would be like checkboxes = document.getElementsByName(startswith.('RecycleBin_chk')); ?? — Steven, Aug 06 '14 at 14:39

score 1 · Answer 1 · edited Aug 07 '14 at 08:38

So i have been able to get it work thanks to all of your hints. I found the check boxes names weren't actually 'chk' but instead 'RecycleBin_chk_x' my final function looked like this if it will help anyone else out who faces the same problem.

function toggle(source) {
var $eles = $(":input[name^='RecycleBin_chk_']").css("font-color","yellow");
checkboxes =  $eles.get();
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}

Thanks again to all your guys comments! :)

Implement a select all checkbox in JSP with javascript

1 Answers1