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 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    5
    Thanked 0 Times in 0 Posts

    checkbox and events

    i have a checkbox:

    Code:
    <input type="checkbox" id="my_checkbox" name="option2" value="Check" checked>Check
    i want to add an event to it so that i do something to a dom element when it is checked and when it is not checked.What is the event and how can i get its status?

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Use the onclick event
    Code:
    // JS section
    function doSomething() {
      alert('Checkbox changed');
    }
    
    // HTML section
    <input type="checkbox" id="my_checkbox" name="option2"
     value="Check" checked onclick="doSomething()">Check

  • Users who have thanked jmrker for this post:

    ubuntu (12-26-2011)

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    Use the onclick event
    Code:
    // JS section
    function doSomething() {
      alert('Checkbox changed');
    }
    
    // HTML section
    <input type="checkbox" id="my_checkbox" name="option2"
     value="Check" checked onclick="doSomething()">Check
    cheers,but how can i get if its clicked or not?
    like:

    Code:
    // JS section
    function doSomething() {
    if(checked) {
      alert('Checkbox is checked');
    }
    if (!(checked)) {
    alert('not checked');
    }
    }
    
    // HTML section
    <input type="checkbox" id="my_checkbox" name="option2"
     value="Check" checked onclick="doSomething()">Check

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Code:
    function doSomething() {
    if(document.getElementById("my_checkbox").checked==true) {
      alert('Checkbox is checked');
    }
    else {
    alert('not checked');
    }
    }

  • Users who have thanked xelawho for this post:

    ubuntu (12-26-2011)

  • #5
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    Code:
    function doSomething() {
    if(document.getElementById("my_checkbox").checked==true) {
      alert('Checkbox is checked');
    }
    else {
    alert('not checked');
    }
    }
    Cheers!Thanks both!

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Alternatively, you can identify multiple checkboxes, which was also not specified in original request.
    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    function doSomething(cbox,status) {
      var str = 'Checkbox '+cbox+' is '+status;
      alert(str);
    }
    </script>
    </head>
    <body>
    
    <input type="checkbox" name="option2" value="1"
     onclick="doSomething(this.value,this.checked)" checked > 1
    <input type="checkbox" name="option2" value="2"
     onclick="doSomething(this.value,this.checked)"> 2
    <input type="checkbox" name="option2" value="3" 
     onclick="doSomething(this.value,this.checked)"> 3
    <input type="checkbox" name="option2" value="4"
     onclick="doSomething(this.value,this.checked)"> 4
    <input type="checkbox" name="option2" value="5"
     onclick="doSomething(this.value,this.checked)" checked> 5
    
    </body>
    </html>


  •  

    Posting Permissions

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