...

View Full Version : checking a checkbox. Works in Firefox but not IE



aslum
04-20-2009, 08:16 PM
I need for a checkbox to become checked when the first two options in a select list are checked. This code works in Firefox and Opera, but none of the other browsers. I mainly need it to work in IE.


Here is the "checkbox checking" function:

function checkMultiSelected()
{
var bookingtypeObj = document.getElementById('bookingtype');
var selObj = document.getElementById('rooms');
if ((selObj.options[1].selected)&&(selObj.options[0].selected))
{
bookingtypeObj.checked = 'checked';
}
}
This is the selection where it's checking if the first two are selected from:

<select id="rooms" name="rooms[]" multiple="multiple" size="5">
<option selected="selected" value="2" onClick="checkMultiSelected()">CR - Closet</option>
<option value="1" onClick="checkMultiSelected()">CR - Kitchen</option>
<option value="5" onClick="checkMultiSelected()">Storytime Room</option>
<option value="3" onClick="checkMultiSelected()">Study 1</option>

<option value="4" onClick="checkMultiSelected()">Study 2</option>
</select>
And this is the checkbox:

<label for="bookingtype">Both sides:</label>
<div class="bookingtype">
<input class="bookingtype" type="checkbox" id="bookingtype" name="bookingtype" >
</div>

Thanks.

Philip M
04-20-2009, 10:00 PM
You have used bookingtype for both an element name and a class. IE does not like that.

aslum
04-21-2009, 12:08 AM
Thanks, I can't wait to see if that works.
I'd be a little embarresed at something so simple if it wasn't so obscure.

TinyScript
04-21-2009, 05:55 AM
I couldn't get your script to work at all. can you link a working example? I'm interested in seeing how it works. Or could you post the entire code, please, because i'm gonna be obsessed trying to make it work.

What I can't figure out is how you get two options to be selected at the same time. can you show me?
I got it to check a box using || in stead of && but it checks the box if either of them is clicked, as expected, so I made two booleans, one for each input and have the input click switch the boolean for itself , but it still clicks the box even though one of the conditions is false on a first click. I'd post it, but it embarrassing. LOL


please lemme see the works in FF script, thanks

thanks for posting this script also

Philip M
04-21-2009, 08:06 AM
Change your code to this and it works fine.


<select id="rooms" name="rooms[]" multiple size="5" onchange = "checkMultiSelected()">
<option selected="selected" value="2" >CR - Closet</option>
<option value="1" >CR - Kitchen</option>
<option value="5" >Storytime Room</option>
<option value="3" >Study 1</option>

<option value="4" >Study 2</option>
</select>


In Internet Explorer, names and IDs (bookingtype) are global variables and thus you should NEVER use a global variable or function name which is the same as an HTML element name or ID or class name.


TinyScript - in a select box multiple designates that more than one option in the list can be selected (by pressing the CTRL key while making the selections) . When creating a multiple list it is almost always a good idea to also use the SIZE attribute.

TinyScript
04-21-2009, 03:47 PM
thanks philip.

aslum
04-22-2009, 10:09 PM
Well it worked... kind of. It now works in IE7 and 6, but no longer works in Firefox.
Changes I made:
onClick for each option to an onChange event as you suggested.
changed name="bookingtype" to name="bookingtypename" and the variable to var bookingtypenameObj = document.getElementById('bookingtypename'); through the function.

For the moment this is good enough, as plans to switch to firefox on the staff machines are very low priority at the moment, however I can't help but be curious why it would stop working on firefox.... Is this sort of thing I need to do a special hack for IE for to have it work in other browsers (It didn't work before, and still doesn't work in Chrome for example).

Anyways, thank you very much, this is at least good enough to implement, and I can fiddle w/ making it cross browser compliant later when I have spare time.

adios
05-04-2009, 09:06 PM
<html>
<head>
<title>untitled</title>
<script type="text/javascript">
function checkMultiSelected(selObj)
{
var bookingtypeObj = document.getElementById('bookingtype');
bookingtypeObj.checked = ((selObj.options[0].selected)&&(selObj.options[1].selected));
}

function doSelect(checked)
{
var selObj = document.getElementById('rooms');
selObj.options[0].selected = checked;
selObj.options[1].selected = checked;
}
</script>
</head>
<body>
<form>
<select id="rooms" name="rooms[]" multiple="multiple" size="5" onchange="checkMultiSelected(this)">
<option selected="selected" value="2" >CR - Closet</option>
<option value="1" >CR - Kitchen</option>
<option value="5" >Storytime Room</option>
<option value="3" >Study 1</option>
<option value="4" >Study 2</option>
</select>
<div class="bookingtype">
<label for="bookingtype">Both sides:</label>
<input class="bookingtype" type="checkbox" id="bookingtype" name="bookingtype" onclick="doSelect(this.checked)">
</div>
</form>
</body>
</html>


IE doesn't handle clicks on select options. Both major browsers do process clicks on the select itself - but there's a catch: the event fires before the select is updated, so you're always one click behind. Use onchange. Believe this works in Opera, Safari, but you'll have to test if needed. Added a bit of code for the checkbox itself, use if desired.

Option.checked is a Boolean (T/F); don't be confused by the odd usage of "checked" to expand the attribute in XHTML. There's a reason, but I forgot it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum