SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    checkbox change event -- what to listen for?

    Hi
    I'm wanting to listen to a heap of checkboxes for their change event.
    I know I can listen for the click event, but I also want to respond when other events in the script may cause a checkbox to change state. (i.e the "check all" link won't fire a click event).

    Just wondering if there is a universal change, or check event that fires in such case?

    I'm using YUI if that's of relevance.
    Cheers

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the closest to what you are after is the onclick event of each individual checkbox - you can call the click method from your "check all" function if needed..
    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    window.onload = function () {
    	var inputs = document.getElementsByTagName("input");
    	for (var i=0; i < inputs.length; i++) {
    		if (inputs[i].type = "checkbox") {
    			inputs[i].onclick = function () {
    				alert(this.name + " changed");
    			}
    		}
    	}
    }
    function chkAll() {
    	var inputs = document.getElementsByTagName("input");
    	for (var i=0; i < inputs.length; i++) {
    		if (inputs[i].type = "checkbox") {
    			if (!inputs[i].checked) {
    				inputs[i].click();
    			}
    		}
    	}	
    }
    </script>
    </head>
    <body>
    <form>
    	<label for="ck1">chk1 <input type="checkbox" id="ck1" name="chk1" value="1" /></label>
    	<label for="ck2">chk2 <input type="checkbox" id="ck2" name="chk2" value="1" /></label>
    	<label for="ck3">chk3 <input type="checkbox" id="ck3" name="chk3" value="1" /></label>
    	<label for="ck4">chk4 <input type="checkbox" id="ck4" name="chk4" value="1" /></label>
    	<label for="ck5">chk5 <input type="checkbox" id="ck5" name="chk5" value="1" /></label>
    	<label for="ck6">chk6 <input type="checkbox" id="ck6" name="chk6" value="1" /></label>
    </form>
    		
    <button onclick="chkAll();">Check All</button>
    </body>
    </html>

  3. #3
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Jim. It hadn't occurred to me to call the click method from another function. That'll work nicely.


Bookmarks

Posting Permissions

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