How to recursively check checkboxes by array values?

Question

I am going to try to be as concise as I can :) I am working on a project. This project generates many pages full of thumbnail images with checkboxes next to them. There can be a varying ammount of total thumbnails. The thumbnails are sorted into 1000 item html pages. So 1000 thumbnails an html page. These pages full of thumbnails are called by a parent html page via iframe. My goal is to have the ability for a user to check checkboxes near these thumbnails, then load a new page into the iframe, checkboxes there, then be able to load the previous page into the iframe, and for the javascript to check the boxes the user had previously checked. I keep track of which checkboxes the user checked by using an array.

Here is the javascript. There is TWO issues! First issue is, I have the alert there for debugging. It does alert the correct values, but it alerts all of the values stored in the array. I wish it to only alert the checkboxes that exist within the iframe page, which is why I have it to the document.getElementByNames. Then... it doesn't check any of the boxes! No box checks :(

Any thoughts on how to accomplish this? the JS and HTML is below...

JS

function repGenChk(valNam) {
  var chkN = valNam.name;
  parent.genL.push(chkN);
  alert(parent.genL);
}
function chkSet() {
  for (var i = 0; i < parent.genL.length; i++) {
  var item = parent.genL[i];
  var item = document.getElementsByName(item);
  if (item != null) { document.getElementsByName(item).checked=true; }
  alert(parent.genL[i]);
}}

window.onload = chkSet();

HTML

<input type="checkbox" onClick="repGenChk(this);" value="1" name="1">
<input type="checkbox" onClick="repGenChk(this);" value="2" name="2">
<input type="checkbox" onClick="repGenChk(this);" value="3" name="3">
<input type="checkbox" onClick="repGenChk(this);" value="4" name="4">
so on and so forth for Xthousands of checkboxes....

Any thoughts, ideas, constructive criticism and critiques are EXTREMELY welcome! I've gotten alot of jQuery suggestions in the past, and i'm heavily starting to consider it.

Thanks so much everyone!

EDIT - I was able to figure it out. I didn't think I could use IDs with checkboxes, I can. Woo!

JS

function repGenChk(valNam) {
var chkN = valNam.id;
parent.genL.push(chkN);
alert(parent.genL);
}
window.onload = function chkSet() {
for (var i = 0; i < parent.genL.length; i++) {
if (document.getElementById(parent.genL[i]) != null) {     document.getElementById(parent.genL[i]).checked=true; }
}
}

HTML

<input type="checkbox" onClick="repGenChk(this);" id="1">
<input type="checkbox" onClick="repGenChk(this);" id="2">
<input type="checkbox" onClick="repGenChk(this);" id="3">
<input type="checkbox" onClick="repGenChk(this);" id="4">
etc etc etc.....

:)

document.getElementsByName returns a collection, but it seems you're trying to use it as a string. Also, you don't need to redeclare 'var item' on each line, and although permitted it is very confusing when the same variable is used to hold different values of different types — lostsource
– lostsource, Commented Nov 20, 2012 at 23:03

RobG · Accepted Answer · 2012-11-20 22:59:49Z

1

Consider putting a single click listener on an element containing the checkboxes. Give each checkbox a unique id or name. When you get a click on the container, check where it came from. If it's from a checkbox, add or remove the name/id of the checkbox to an object storing which ones are checked depending on whether the checkbox is checked or not.

When you want to re-check them, iterate over the object (using for..in) and use getElementById or getElementsByName(…)[0] to check the checkbox. That way you only iterate over as many object properties as there are checked checkboxes and also getElementById is very fast, so things should be simpler and faster.

BTW, getElementsByName returns a collection, which is array-like but it isn't an array.

answered Nov 20, 2012 at 22:59

RobG

148k32 gold badges180 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

0xhughes Over a year ago

Thank you for the response, I got it working! I didn't think ID worked for checkboxes, guess it does! Thanks :)

Collectives™ on Stack Overflow

How to recursively check checkboxes by array values?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related