SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    964
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Checkbox changing value?

    I have a checkbox which I use with an onchange function like this:
    Code HTML4Strict:
    <input name="topbar_active" type="checkbox" value="1" onchange="topbaractivate(this.value);"/>

    And then I have this script:
    Code JavaScript:
    function topbaractivate(c){
            alert(c);
        if (c == 1){
            // Do something here //
        } else {
            // Do something else here //
        }
    }

    But the trouble is that nomatter if the checkbox is checked or not it passes the value "1".

    How do I get passed this?

    Thanks in advance :-)

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The proper way to tell if a checkbox has been checked by a user is to use the checked property, see the following jsFiddle for a simple demo of how to accomplish this.

    http://jsfiddle.net/umhh2/

  3. #3
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    964
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chris.upjohn View Post
    The proper way to tell if a checkbox has been checked by a user is to use the checked property, see the following jsFiddle for a simple demo of how to accomplish this.

    http://jsfiddle.net/umhh2/
    Tryid this but it doesnt react the first time I hit the checkbox... After that it works? What am I doing wrong?
    Code JavaScript:
    function topbaractivate(){
        document.getElementById('topbar_active').onchange = function() {
            if(this.checked == true){
                jQuery("#mif").contents().find("#startheader h1").css("display","inherit");
                jQuery("#mif").contents().find("#startheader #logo").css("display","none");
            } else {
                jQuery("#mif").contents().find("#startheader h1").css("display","none");
                jQuery("#mif").contents().find("#startheader #logo").css("display","inherit");
            }
        };
    }

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    If your using jQuery then you can simplify the entire process by using the following instead:

    HTML Code:
    <input name="topbar_active" type="checkbox" value="1" />
    Code JavaScript:
    $('input[name=topbar_active]').change(function() {
        if ($(this).is(':checked')) {
            var display = ['inhert', 'none'];
        } else {
            var display = ['none', 'inhert'];
        }
     
        $('#mif')
            .contents()
            .find('#startheader h1')
            .css('display', display[0])
            .find('#startheader #logo')
            .css('display', display[1]);
    });


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
  •