Onmouseover and Checkboxes

How to make the checkboxes become ticked or unticked when a mousing over?

[AndieR]

Hello!

I have say 3 different checkboxes (cat / dog / fish) in a page and five thumbnails of animal pictures.

Currently when I click on one of the pictures it reads from the database and loads the page again with the appropriate checkboxes ticked.

What I would like to do is to read the database and create say an array with all of the data avaialble in the source in the start, then when an user would mouseover a thumbnail the checkboxes would update without the page having to load again...

Does this seem possible to you? I've been trying a few things but I can't seem to find anything consistent I'm afraid... Any help would be greatly appreciated! :)

Regards,
AndieR

[Bernard Marx]

Very possible, as far as I can see. But..

- Why onmouseover. Wouldn't onclick be better?
- 5 animals, only 3 checkboxes. What's that about (or is this a many-to-one affair?)

[pre]
function checkABox(name)
{
    document.getElementsByName(name)[0].checked = true;
    return false; /* prevent default href being followed */
}
<input type="checkbox" name="fish">
<!-- contains default href action for JS-disabled browsers -->
<a href="page.php?choice=cod" onclick="return checkABox('fish')">
    <img src="cod.jpg">
</a>
[/pre]

[AndieR]

Hello Bernard,

Thanks for the quick reply, it does exactly what I had in mind indeed! Actually I said onmouseover as an example but onclick is better.

Also the idea would be to have multiple checkboxes ticked onclick for instance. Let's say the thumbs represent children and each time you click on the thumb you can see which of the pets in the checkbox list they own, so a child may own a single pet or else several. Would this be possible?

Thank you again,
AndierR

[Bernard Marx]

// Global array, arguments, holds
// the arguments passed into the active function.
function checkBoxes()
{
  for(var k=0;k<arguments.length;k++)
    document.getElementsByName(arguments[k])[0].checked = true;
  return false;
}
<input type="checkbox" name="fish">
<a href="page.php?child=matthew"
 onclick="return checkBoxes('cat','dog','brontosaurus')">
  <img src="matthew.jpg">
</a>

[Bernard Marx]

But it would probably be better to keep all the client-side info in one place - that is, inside the script, and separate from the markup.

This would mean creating a small data relation .js file dynamically, perhaps.

// Perhaps in separate file
var childrenToPets =
{
  matthew: ['cat','dog','brontosaurus'],
  mark:  ['cat','snake'],
  luke:  ['toad'],
  bambi: ['donkey','spider']
}
//<>
function checkBoxes(childName)
{
  var petNames = childrenToPets[childName];
  for(var k=0; k<petNames; k++)
    document.getElementsByName(petNames[k])[0].checked = true;
  return false;
}
<input type="checkbox" name="brontosaurus">
<a id="matthew" href="page.php?child=matthew"
 onclick="return checkABox(this.id)">
  <img src="matthew.jpg">
</a>

[Bernard Marx]

Oh yes..

There's no mechanism for unchecking boxes as yet. This can be done, but we'll need to know more about exact behaviour first.

...

a) Previous boxes are unchecked when a new child is clicked.
b) Previous boxes are unchecked only when their child is clicked ('unclicked')

...or peraps you'd like to go back to mouseovers, which would only leave one option.

[AndieR]

Hello,

Thank you for the new sample with the array, it's very interesting too... Do you think this method would work with Mozilla?

I've been testing with your previous suggestion that was great too around my PHP and ended up with the following code that works fine for my purpose, however it doesn't work with Firefox and I haven't a good enough level in javascript to even start guessing why... Do you have any idea on this by chance? It would mean a lot to me if I could sort this problem out! :)

Thank you,
AndieR

function checkABox() {
nb = arguments.length;
arg = "";
for (var i = 0; i < nb; i++)
{
arg = arguments[i];
document.getElementsByName(arg)[0].checked = true;
}
}

[AndieR]

Dear Bernard,

I just found out what my problem was: I wasn't declaring the input name correctly within my PHP!

Thank you for your help so far!

Regards,
AndieR

[Bernard Marx]

That's good. I can't see a reason for Mozilla not to play, but so far I have only been 'testing' it in my head.

[AndieR]

Hello again,

I'm trying to do this replace the getElementByName by getElementById because I need the name value in my form to pass another variable to php but I'm afraid it isn't working... If I put the variable $item in the name it does work fine but not if I put it in the id and replace the getElement...

document.getElementsById(arg)[0].checked = true;

<input type=checkbox id=$item name=tagsid[] value=$item>

Thank you for any help!

Regards,
Andrea

[Bernard Marx]

I'm not getting this so clearly, anyway...

[b]document.getElement[red]s[/red]ById(arg)[red][0][/red].checked = true;[/b]

This doesn't exist. Unless you're doing a CSS hack, it won't help giving more than one element the same

id

. If there are >1, getElementById only returns the first such in the document.

Maybe you want:

[b]document.getElementById(arg).checked = true;[/b]

Any help _?

[DrDoc]

Can I just ask something ...

Why not use a <label> for each checkbox? It does what you want, is specifically designed for this purpose, and works without needing JS. :)

...unless, of course, checking multiple boxes at once is needed.

[Bernard Marx]

...which is indeed the name of the game, doc.

( msg #:3 )

[AndieR]

Thank you Bernard!

That just solved everything indeed! Thank you again for all the help. I trully appreciate it. :)

Regards,
Andrea