Array of checkboxes 2

[Sleidia]

Hello,

One quick question :

With ...

...
<input type="checkbox" name="cb_a[0]">
<input type="checkbox" name="cb_a[1]">
<input type="checkbox" name="cb_a[2]">
...
<input type="checkbox" name="cb_b[0]">
<input type="checkbox" name="cb_b[1]">
<input type="checkbox" name="cb_b[2]">
...

... how do I automatically check cb_b[0] when cb_a[0] is checked? Same for cb_b[1] with cb_a[1], and so on.

The first method that comes in mind would be to loop through elements.length but I'd like to know if there is a much more elegant one.

document.form.cb_b[0].checked = document.form.cb_a[0].checked;

doesn't work.

Thanks

 

[trollacious]

If you're going to use reserved Javascript characters in your form element names, you'll have to access the elements through the associative array:

document.form.elements['cb_b[0]'].checked = document.form.elements['cb_a[0]'].checked;

Lee

 

[trollacious]

You could also use a function something like this:

function crosscheck(cbox)
{
var cname = cbox.name;
var oname = '';
if (cname.indexOf('_a') > -1)
  {
  oname = cname.replace('_a', '_b');
  }
else if (cname.indexOf('_b') > -1)
  {
  oname = cname.replace('_b', '_a');
  }

if (oname.length > 0)
  {
  cbox.form.elements[oname].checked = cbox.checked;
  }
}

<input type="checkbox" name="cb_a[0]" onclick="crosscheck(this);">

Lee

 

[Sleidia]

Thanks Trollacious.

I'm sorry but ...

document.form.elements['cb_b[0]'].checked = document.form.elements['cb_a[0]'].checked;

... doesn't work. I've tried on IE and FireFox with the same result

What's weird is that no javascript error is shown.

Thanks for the other idea but I would prefer an inline method so that I don't have to create a specific function for that. Of course, I will if I have no other option left.

 

[trollacious]

Is the form name form?

Lee

 

[Sleidia]

No but, of course, I've replaced "form" by the real name of my form.

Here is the real HTML code :

...
<input type="checkbox" name="form_layout_file_name_a[9]" value="footer-bg.jpg" onclick="javascript:
document.form_layout_files.elements['form_layout_file_name_b[9]'].checked = document.form_layout_files.elements['form_layout_file_name_a[9]'].checked;
">
...

 

[trollacious]

It always helps to show the REAL code to get REAL answers.

Why did you add javascript to the event handler? I had no problem with your code when that was gone, and it worked fine with it in there, as well. Are you SURE your form is named "form_layout_files"?

Lee

 

[Sleidia]

Sorry for the extra javascript word.
Part from that, everything is correct but the code doesn't work.

Well, I'm gonna take some rest and check the code afterwards. I might even try to debug it out of its current context.

Thanks for your help. Really

 

[trollacious]

You need to show more of your code then. I tested the following, most pasted and copied from your example above, and it worked perfectly:

<form action="" name="form_layout_files">
<input type="checkbox" name="form_layout_file_name_a[9]" value="footer-bg.jpg" onclick="javascript:document.form_layout_files.elements['form_layout_file_name_b[9]'].checked = document.form_layout_files.elements['form_layout_file_name_a[9]'].checked;
">
<input type="checkbox" name="form_layout_file_name_b[9]" value="footer-bg.jpg" onclick="javascript:document.form_layout_files.elements['form_layout_file_name_a[9]'].checked = document.form_layout_files.elements['form_layout_file_name_b[9]'].checked;
">
</form>

Lee

 

[tsuji]

Instead of onclick event on the checkbox, try use onchange. (Handling line modification is not material.)
[tt]
<input type="checkbox" name="form_layout_file_name_a[9]" value="footer-bg.jpg" on[blue]change[/blue]="document.form_layout_files.elements['form_layout_file_name_b[9]'].checked = this.checked;">[/tt]

 

[tsuji]

The change effect takes place on the checkbox losing focus. Hence, I'm not proposing onclick is not good, just try assessing if timing is an issue.

 

[trollacious]

After copying and pasting the code in the example I gave above, I realized I had used what I'd tested to see if the unneeded javascript was significant. tsuji's code using this.checked is more what I'd use in real life, though I'd probably put it in a function similar to the second response I gave.

Lee