Javascript loop through checkboxes

jcgroove
jcgroove used Ask the Experts™
on
I have an HTA text file generator that has several checkboxes.
Any combination of the checkboxes can be selected.
To capture every possible combination in an IF statement would be a couple hundred embedded statements.

Is there a way to loop through the checkboxes and have the script identify the checked checkboxes and input the data into the text file that is generated?

I have attached an example text file with the script I already have.
test.txt
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Kim WalkerWeb Programmer/Technician

Commented:
There are several ways to accomplish this. The following is probably the simplest but requires that the input ids are consecutively numbered — skipping sensor4 would cause the loop to end at sensor3. It does not accommodate the conversion from number to word in the writeline either.
var index = 1, sensor;
while (sensor = document.getElementById('Sensor'+index) ) {
	if (sensor.checked) {
		s.writeline('	('+index+') SENSOR '+index);
	}
	index++;
}

Open in new window

It would help if the input tags had values that could be used in the writeline code. The value would match the text that follows the input tag. It is possible to just get the text that follows the input tag for the writeline, but that gets pretty complicated. This would all be much easier with jQuery.

Author

Commented:
I don't have any experience with jquery. As long as it doesn't use any online resources because where I'm using this HTA has no online access.

The input IDs are not specific. They will all be different with the actual application.
I can change the input IDs and values as much as needed provided the text on the HTA itself is the same.

Author

Commented:
Attached is a text file with a more accurate representation of the checkbox IDs, names etc.
test2.txt
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

greetings jcgroove, , I have looked at your  code setup in the two test  text files, and here is my javascript and HTML that loops through the checkboxes in the form and adds the ID to a string, and then shows that string in a span -
<script>

function WriteToFile(fm) {
var outString = "";
var checks = fm.getElementsByTagName("input");
for (var i=0; i < checks.length; ++i) {
  if (checks[i].type == "checkbox" && checks[i].checked) outString += checks[i].id+",";
  }
if(!outString) outString = "None";
document.getElementById("sp1").innerHTML = outString;
}

</script>

<form id="TFG" name="TFG">
<table width="100%" border>
  <tr>
    <td width="25%" align="middle"><input id="SA" type="checkbox" name="BasicCheckbox1"> SA</td>
    <td width="25%" align="middle"><input id="HA" type="checkbox" name="BasicCheckbox2"> HA</td>
    <td width="25%" align="middle"><input id="AI&R" type="checkbox" name="BasicCheckbox3"> AI&R</td>
    <td width="25%" align="middle"><input id="NMH" type="checkbox" name="BasicCheckbox4"> NMH</td>
  </tr>
  <tr>
    <td width="25%" align="middle"><input id="LCCA" type="checkbox" name="BasicCheckbox5"> LCCA</td>
    <td width="25%" align="middle"><input id="SRA" type="checkbox" name="BasicCheckbox6"> SRA</td>
    <td width="25%" align="middle"><input id="WAA" type="checkbox" name="BasicCheckbox7"> WAA</td>
    <td width="25%" align="middle"><input id="LFBA" type="checkbox" name="BasicCheckbox8"> LFBA</td>
  </tr>
</table>
<span id="sp1">Blank</span>
<br>
<INPUT TYPE=BUTTON VALUE="Generate Text File" onClick="WriteToFile(this.form)">
</form>

Open in new window

I get all of the inputs with the -
     fm.getElementsByTagName("input")

and then just do the checked checkboxes with -
     if (checks[j].type == "checkbox" && checks[j].checked)

you can change the string addition -
      outString += checks[j].id+",";
to add extra characters or formatting (like the windows linebreak  \r\l )

maybe this will help, ask about other points I did not cover.

Author

Commented:
Slick812,

Thanks for your help!
This is closer to what I'm trying to achieve.

What I need is for each checked item to be written on a separate line prefaced by an incrementing  number.

example:
(1) HA
(2) SRA
(3) WAA

I need this data to be written to a text file. The first example (and some of the second) I provided had the text file functions in it.
In the Internet explorer I can not  use that -
    ActiveXObject("Scripting.FileSystemObject");

to read or write files, I think it is now restricted to not work, in current IE versions, , , so I can not help you with that.

since you seem to think that you can use it , this is the line that gets the individual checkbox object -
       if (checks[j].type == "checkbox" && checks[j].checked)

so after that test you can write anything you like into the writeline method
        s.writeline('      (1) SENSOR ONE');

so you keep the for loop and change this line -
if (checks[i].type == "checkbox" && checks[i].checked) {
   s.writeline('      ('+(i+1)+') '+checks[i].id);
   }

Open in new window

Author

Commented:
Attached is the script that actually achieves what I was looking for.

Now on to the next question.
The script works for all input elements.
Is there a way to separate one group of checkboxes from another?
I have one group of checkboxes for "SATsensors" and another group for "UNSATsensors".
So the text file output would have two different instances of checkboxes to be looped through by the script then out put into a different part of the text file.

I tried using the "class" identifier and it wouldn't work.

Any help is appreciated!
test3.txt
First, you need to correctly use the <table> HTML formatting, , , tables DO NOT ALLOW anything (text) between the <tr> and the <td> except spaces-tabs-linebreaks,  so your code -
<tr> SAT Sensors
    <td

is Incorrect, and can screw up the display of a <table> you should have used the table <caption>
<table id="SATsensors" width="100%" border>
<caption>SAT Sensors</caption>
  <tr>
    <td

Open in new window


You seem to not know the way to get separate elements of a container with javascript, in your resent setup you have increased from one table to two tables, BUT you have nothing in the checkbox <input> to differentiate the ckbox as being in either table, as all ckboxes have this -
      class="SATsensors"

so you can use the standard  .getElementById("SATsensors")     and then do TWO loops with the two table ID element return
var checks = fm.getElementById("SATsensors").getElementsByTagName("input");
var n = 1;
for (var i=0; i < checks.length; ++i) 
{
  if (checks[i].type == "checkbox" && checks[i].checked) 
	{
	s.writeline('      ('+(n++)+'SAS) '+checks[i].name);
   	}
}

checks = fm.getElementById("UNSATsensors").getElementsByTagName("input");
n = 1;
for ( i=0; i < checks.length; ++i) 
{
  if (checks[i].type == "checkbox" && checks[i].checked) 
	{
	s.writeline('      ('+(n++)+'UNS) '+checks[i].name);
   	}
}

Open in new window


or you can use this -
    var tbls = fm.getElementsByTagName("table");

to get the two (or more) tables in the   tbls   array , and then use the   tbls  elements separately as my above code, or in a tables loop -
   for (var i=0; i < tbls.length; ++i) {

Author

Commented:
Thanks for your help.

Honestly, I was paying more attention to the script than the HTML.

This is what ended up working for me:
var checks = document.getElementsByName('SATsensors')[0].getElementsByTagName("input");
var n = 1;
for (var i=0; i < checks.length; ++i) 
{
  if (checks[i].type == "checkbox" && checks[i].checked) 
	{
	s.writeline('      ('+(n++)+') '+checks[i].name);
   	}
}

checks = document.getElementsByName('UNSATsensors')[0].getElementsByTagName("input");
n = 1;
for ( i=0; i < checks.length; ++i) 
{
  if (checks[i].type == "checkbox" && checks[i].checked) 
	{
	s.writeline('      ('+(n++)+') '+checks[i].name);
   	}
}

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial