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.....

🙂

Answer 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.