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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts

    Auto checking tickbox...

    Hi

    I want to make a checkbox automatically tick itself when someone chooses an item from a pulldown menu...

    Is this possible???

    Here's the lame code i have so far.

    Thanks

    Code:
    <input name="Hamper" type="checkbox" value="Add Hamper"> 
    	<select name="select type">
    		<option selected>Hamper Types
    		<option>
    		<option value="#">2 Person Hamper
    		<option value="#">2 Person Luxury Hamper
    		<option value="#">4 Person Hamper
    		<option value="#">4 Person Luxury Hamper
    		<option value="#">6 Person Hamper
    		<option value="#">6 Person Luxury Hamper
    		<option value="#">8 Person Hamper
    		<option value="#">8 Person Luxury Hamper
    	</select>

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    e.g.
    Code:
    <script type="text/javascript">
    
    function setAddHamper() {
    
    	var hhEl = document.getElementById('addhamper');
    	var whichHamperEl = document.getElementById('hampertype');
    	hhEl.checked = (whichHamperEl.value != '0');
    
    }
    
    </script>
    Code:
    <form action="/" method="post">
    <fieldset>
    
    	<label>
    		<input type="checkbox" value="Add Hamper" name="addhamper" id="addhamper">
    		Add hamper
    	</label>
    
    	<label>Hamper type
    		<select name="hampertype" id="hampertype" onchange="setAddHamper();">
    			<option value="0">No Hamper</option>
    			<option value="1">2 Person Hamper</option>
    			<option value="2">2 Person Luxury Hamper</option>
    			<option value="3">4 Person Hamper</option>
    			<option value="4">4 Person Luxury Hamper</option>
    			<option value="5">6 Person Hamper</option>
    			<option value="6">6 Person Luxury Hamper</option>
    			<option value="7">8 Person Hamper</option>
    			<option value="8">8 Person Luxury Hamper</option>
    		</select>
    	</label>
    
    </fieldset>
    </form>
    The checkbox would ideally be given a readonly attribute to prevent users from checking it without actually selecting a hamper type. However, the readonly attribute isn't reliable/available for checkboxes, so there's very little to prevent users from misusing the form.

    It's worth noting that using onchange with select menus has some major accessibility issues for keyboard users/navigators, so it maybe preferable to check the checkbox as part of a submit/validation process.
    Personally, I'm not sure I see any reason to have a checkbox given that you can get that info directly from the select menu.
    Last edited by Bill Posters; 04-27-2006 at 01:57 PM.

  • #3
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts
    thanks bill

    i see your point about usability, to be honest it's as much a learning exercise as anything...

    If I was to have more than one pulldown menu, how would that work... obviously would need to adapt the javascript.

    Code:
    <form action="/" method="post">
    <fieldset>
    
            <label>
                    <input type="checkbox" value="Add Hamper" name="addhamper" id="addhamper">
                    Add Hamper
            </label>
    
            <label>
                    <select name="hampertype" id="hampertype" onchange="setAddHamper();">
                            <option value="0">No Hamper</option>
                            <option value="1">2 Person Hamper</option>
                            <option value="2">2 Person Luxury Hamper</option>
                            <option value="3">4 Person Hamper</option>
                            <option value="4">4 Person Luxury Hamper</option>
                            <option value="5">6 Person Hamper</option>
                            <option value="6">6 Person Luxury Hamper</option>
                            <option value="7">8 Person Hamper</option>
                            <option value="8">8 Person Luxury Hamper</option>
                    </select>
            </label>
    
    <br>
    
            <label>
                    <input type="checkbox" value="Add Umbrella" name="addUmbrella" id="addUmbrella">
                    Add Umbrella
            </label>
    
            <label>
                    <select name="Umbrellatype" id="umbrellatype" onchange="setAddUmbrella();">
                            <option value="0">No Umbrella</option>
                            <option value="1">1 Umbrella</option>
                            <option value="2">2 Umbrellas</option>
                            <option value="3">3 Umbrellas</option>
                            <option value="4">4 Umbrellas</option>
                    </select>
            </label>
    
    </fieldset>
    </form>

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    The function can be made more reusable by passing certain values as variables in the function call. (There are other ways to address the relevant elements, but this is the most straight-forward.)

    Code:
    	function setAddItem(checkboxId,selectId) {
    
    		var checkboxEl = document.getElementById(checkboxId);
    		var selectEl = document.getElementById(selectId);
    		checkboxEl.checked = (selectEl.value != '0');
    
    	}
    Code:
    <form action="/" method="post">
    <fieldset>
    
            <label>
                    <input type="checkbox" value="Add Hamper" name="addhamper" id="addhamper">
                    Add Hamper
            </label>
    
            <label>
                    <select name="hampertype" id="hampertype" onchange="setAddItem('addhamper',this.id);">
                            <option value="0">No Hamper</option>
                            <option value="1">2 Person Hamper</option>
                            <option value="2">2 Person Luxury Hamper</option>
                            <option value="3">4 Person Hamper</option>
                            <option value="4">4 Person Luxury Hamper</option>
                            <option value="5">6 Person Hamper</option>
                            <option value="6">6 Person Luxury Hamper</option>
                            <option value="7">8 Person Hamper</option>
                            <option value="8">8 Person Luxury Hamper</option>
                    </select>
            </label>
    
    <br>
    
            <label>
                    <input type="checkbox" value="Add Umbrella" name="addUmbrella" id="addUmbrella">
                    Add Umbrella
            </label>
    
            <label>
                    <select name="Umbrellatype" id="umbrellatype" onchange="setAddItem('addUmbrella',this.id);">
                            <option value="0">No Umbrella</option>
                            <option value="1">1 Umbrella</option>
                            <option value="2">2 Umbrellas</option>
                            <option value="3">3 Umbrellas</option>
                            <option value="4">4 Umbrellas</option>
                    </select>
            </label>
    
    </fieldset>
    </form>

  • #5
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts
    Thats great stuff

    I've actually adapted the Javascript slightly so that the check box is inactive until a menu item is selected... it's just a cosmetic thing really to go alongside the menu.

    Thanks

    Code:
    <script type="text/javascript">
            function setAddItem(checkboxId,selectId) {
                    var checkboxEl = document.getElementById(checkboxId);
                    var selectEl = document.getElementById(selectId);
                    checkboxEl.checked = (selectEl.value != '0');
    				checkboxEl.disabled = (selectEl.value <= '0');
            }
    </script>


  •  

    Posting Permissions

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