Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2009
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Exclamation checking a checkbox. Works in Firefox but not IE

    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:
    Code:
    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:
    Code:
    <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:
    Code:
    <label for="bookingtype">Both sides:</label>
    <div class="bookingtype">
    	 <input class="bookingtype" type="checkbox" id="bookingtype" name="bookingtype" >
    </div>
    Thanks.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,299
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    You have used bookingtype for both an element name and a class. IE does not like that.

  • #3
    New Coder
    Join Date
    Apr 2009
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    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

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,299
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Change your code to this and it works fine.

    Code:
    <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.
    Last edited by Philip M; 04-21-2009 at 09:14 AM.

  • Users who have thanked Philip M for this post:

    aslum (04-22-2009)

  • #6
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    thanks philip.

  • #7
    New Coder
    Join Date
    Apr 2009
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Code:
    <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.
    Last edited by adios; 05-05-2009 at 12:05 AM. Reason: typing practice


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •