JS from class into id

[kajje]

Since a while I'm using this little js function to select and deselect multiple selectboxes. It all worked fine till I had a great idea to implement css into my site. Were I before could use the class='x' as parameters of my script, it now is impossible. A big boy as I am I tried to change the class='x' into id='x'. Should work, doesn't work.

My original javascript:

function checkAll(cName, status)
{
var theForm = document.getElementById('selectForm');

for (i=0,n=theForm.elements.length;i<n;i++)
if (theForm.elements[i].className.indexOf(cName) !=-1)
{
theForm.elements[i].checked = status;
}
}

And a snip of my original html code:

<form method=post id="selectForm">
Shopping
Food
<span onclick="checkAll('results2', 1);checkAll('results3', 1);checkAll('results4', 1);checkAll('results5', 1);checkAll('results6', 1);checkAll('results7', 1);checkAll('results8', 1);checkAll('results9', 1);checkAll('results10', 1);checkAll('results11', 1);">ALL</span> 
<span onclick="checkAll('results2', 0);checkAll('results3', 0);checkAll('results4', 0);checkAll('results5', 0);checkAll('results6', 0);checkAll('results7', 0);checkAll('results8', 0);checkAll('results9', 0);checkAll('results10', 0);checkAll('results11', 0);">NONE</span>

Vegetables
<span onclick="checkAll('results2', 1);">ALL</span> 
<span onclick="checkAll('results2', 0);">NONE</span>

<input type="checkbox" value="potato" name="shopping[]" class="results2"> Potato
<input type="checkbox" value="cucumber" name="shopping[]" class="results2"> Cucumber
<input type="checkbox" value="tomato" name="shopping[]" class="results2"> Tomato


Fruit
<span onclick="checkAll('results3', 1);">ALL</span> 
<span onclick="checkAll('results3', 0);">NONE</span>

<input type="checkbox" value="orange" name="shopping[]" class="results2"> Orange
<input type="checkbox" value="apple" name="shopping[]" class="results2"> Apple
<input type="checkbox" value="pear" name="shopping[]" class="results2"> Pear
</form>

As you see I use class to feed the javascript of parameters.
I would like to change the class-es into id-s

Any hints?

[Fotiman]

I before could use the class='x' as parameters of my script, it now is impossible.

Why is it impossible? I don't see any reason why your original code would not work. Is it simply that you are reusing the class names, for example, results2? Why not do something like this:

Vegetables
<span onclick="checkAll('vegetable', 1);">ALL</span> 
<span onclick="checkAll('vegetable', 0);">NONE</span>
<input type="checkbox" value="potato" name="shopping[]" class="vegetable"> Potato
<input type="checkbox" value="cucumber" name="shopping[]" class="vegetable"> Cucumber
<input type="checkbox" value="tomato" name="shopping[]" class="vegetable"> Tomato
Fruit
<span onclick="checkAll('fruit', 1);">ALL</span> 
<span onclick="checkAll('fruit', 0);">NONE</span>
<input type="checkbox" value="orange" name="shopping[]" class="fruit"> Orange
<input type="checkbox" value="apple" name="shopping[]" class="fruit"> Apple
<input type="checkbox" value="pear" name="shopping[]" class="fruit"> Pear

[kajje]

Hi Fotiman,

The reason I used resultsX was to be more easy able to generate it more easily by my php script. Your replacement by "fruit" looks better indeed if you look to the source, but is more difficult to generate out of my php script. Don't really care about presenting fancy readable stuff for people sniffing in my html code :-)

The thing is that in my new setup I cannot use classes anymore because the classes are filled by the css.
The class-names for every entry are the same in my new setup, they all point to on single stylesheet entry.

I therefore thought I had to get rid of the classes for feeding the js. I cannot use the 'name' either because they are all point to the same shopping[] array. Therefore I thought to use id='x'?

I thought about something like
<code><input type="checkbox" value="potato" name="shopping[]" class="mycssclass" id="result2"> Potato</code>
And get the js to use the id rather than the class for doing its job.

[Fotiman]

I still don't know what you mean by "the classes are filled by the css". There would be nothing preventing you from doing something like this in your CSS:

.vegetable, .fruit { /* styles */ }

instead of

.result2 { /* styles */ }

Alternatively, you could give your inputs multiple classes like:

class="vegetable result2"
class="fruit result2"

And then still apply the common styling to the .result2 class.

In any case, the issue is that you need some way to distinguish the different groups. If you use id's, they have to be unique for each input, which seems like it would be even more work server side than simply identifying the common groups and applying classes as in my previous example.

I'm not really sure how your PHP is generating the output, but it doesn't seem to me as though it would be all that difficult to apply different classes via the PHP. You obviously already know where the delineation point is between vegetables and fruits because there's where you output the Fruit heading.

[kajje]

Multiple classes... Haven't thought of that - in fact - didn't know that was possible!

Thanks for the help!