SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 43
  1. #1
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Check if a checkbox is checked not working

    I have a checkbox with value "tipo". I would like to check if it's checked or not. This is the script, which is not working:

    Code:
    $(function() {
    	
    	if($('input[value=tipo]').is(':checked]')) {
    		alert('asd');
    	}
    	
    })
    Where is the error?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by D3V4 View Post
    Where is the error?
    The script will check only once, when the page is loaded. Is that what you're after?

    Also, on the attribute equals selector documentation page, you'll see that the value is contained within double quotes. That might have something to do with the problem you're facing.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    The script will check only once, when the page is loaded. Is that what you're after?
    No, I want to check it constantly.

    Also, on the attribute equals selector documentation page, you'll see that the value is contained within double quotes. That might have something to do with the problem you're facing.
    I've always used it without quotes, I thought it was correct this way...

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by D3V4 View Post
    No, I want to check it constantly.
    Then you will want to attach a click event to the checkbox. Something like this should do the trick:

    Code javascript:
    $(function() {
        $(':checkbox[value="tipo"]').click(function () {
            if ($(this).is(':checked')) {
                alert('asd');
            }
        });
    });

    Quote Originally Posted by D3V4 View Post
    I've always used it without quotes, I thought it was correct this way...
    Not officially, no.

    The attribute selector page says:

    Attribute values in selector expressions must be surrounded by quotation marks.

    And yes, the bold piece is straight from their page too.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Then you will want to attach a click event to the checkbox. Something like this should do the trick:

    Code javascript:
    $(function() {
        $(':checkbox[value="tipo"]').click(function () {
            if ($(this).is(':checked')) {
                alert('asd');
            }
        });
    });
    This worked, thank you

    Not officially, no.

    The attribute selector page says:

    Attribute values in selector expressions must be surrounded by quotation marks.

    And yes, the bold piece is straight from their page too.
    Thanks

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by D3V4 View Post
    What if I want to bind the click event to every checkbox on the page?
    You know how this selects the checkbox with a value of tipo?

    Code javascript:
    $(':checkbox[value="tipo"]')

    What change do you think you would need to make to it?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    You know how this selects the checkbox with a value of tipo?

    Code javascript:
    $(':checkbox[value="tipo"]')

    What change do you think you would need to make to it?
    Dumb question, that's why I've deleted it immediately.

    My questions actually meant how i could go through all the checkboxes and do different things based on the name of the checkbox. I've done it like this:

    Code:
    $(function() {
    	
    	$(':checkbox').click(function() {
    		if ($(this).is(':checked')) {
    			var colonna = $(this).attr("value");
    			$('#'+colonna).show();
    			$('.'+colonna).show();
    		} else {
    			var colonna = $(this).attr("value");
    			$('#'+colonna).hide();
    			$('.'+colonna).hide();
    		}
    	})
    		
    	
    })

  8. #8
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A question that came up to my mind right now: is there an event that I can use to see if a checkbox is checked or unchecked by another javascript file and not by a user?

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by D3V4 View Post
    Dumb question, that's why I've deleted it immediately.

    My questions actually meant how i could go through all the checkboxes and do different things based on the name of the checkbox.
    What sort of things would you want to do?

    Here's a way to condense the code you had up there. Whether the code is easier to understand though, is doubtful.

    Code javascript:
    $(function() {
        $(':checkbox').click(function() {
            var colonna = this.value,
                action = ($(this).is(':checked')) ? 'show' : 'hide';
            $('#' + colonna + ', .' + colonna)[action]();
        });
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    This is easier to understand than my previous code though:

    Code javascript:
    $(function() {
        function triggerAction(name, action) {
            $('#' + name + ', .' + name)[action]();
        }
     
        $(':checkbox').click(function() {
            triggerAction(
                this.value,
                ($(this).is(':checked')) ? 'show' : 'hide'
            );
        });
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestions, although I must say that I find the first version of the code easier to understand

    Do you have an answer for my last question too?

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by D3V4 View Post
    A question that came up to my mind right now: is there an event that I can use to see if a checkbox is checked or unchecked by another javascript file and not by a user?
    The elements' click event will trigger no matter where the change is coming from.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I must have a problem with my scripts though. I have a script that checks or unchecks all the checkboxes (after clicking on a link) and another script that shows the correspondent column if the checkbox is checked, or hides it otherwise.

    If I uncheck a checbox manually, the column is hidden. If I make the script check all the checkboxes (clicking on the link), all the checkboxes become checked but the one I had unchecked previously remains hidden, even if it's now checked.

    I don't know if I've made my point clear here thanks for all your help, by the way

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by D3V4 View Post
    I must have a problem with my scripts though.
    Perhaps not, and perhaps I wasn't being clear enough in my response.

    What I was meaning to say is that it doesn't matter where the click event comes from. A person can click on the checkbox, or a script can trigger the click event on the checkbox. Whether by user or scripted command, it is the same event that is run.

    Quote Originally Posted by D3V4 View Post
    I have a script that checks or unchecks all the checkboxes (after clicking on a link) and another script that shows the correspondent column if the checkbox is checked, or hides it otherwise.
    If you are directly editing the checked property of the checkbox, then that won't trigger the click event. Instead of directly editing that value, first investigate to find out if it is checked or not. If it's not in the correct state, trigger the click event on that checkbox and that should get you closer to a solution.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    If you are directly editing the checked property of the checkbox, then that won't trigger the click event. Instead of directly editing that value, first investigate to find out if it is checked or not. If it's not in the correct state, trigger the click event on that checkbox and that should get you closer to a solution.
    I don't understand what you mean with the part in bold.

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by D3V4 View Post
    I don't understand what you mean with the part in bold.
    You can see an example on the jQuery trigger documentation page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #17
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    You can see an example on the jQuery trigger documentation page.
    Ok, now I'm not editing the property value but I'm using trigger to launch the click event, but it still isn't working.

    I mean, the checkbox becomes checked but the script that should run after a click event is not executed.

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by D3V4 View Post
    Ok, now I'm not editing the property value
    I have difficulty interpreting what that means in terms of the code. Can you show it, along with how you're using the trigger event to fire off a command to run on page load the event that updates the counter?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  19. #19
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    I have difficulty interpreting what that means in terms of the code. Can you show it, along with how you're using the trigger event to fire off a command to run on page load the event that updates the counter?
    Sure.

    So, at the beginning I changed the checked property like this:

    Code:
    $('input[type="checkbox"]').each(function() {
        			$(this).attr('checked', true);
        		})
    Now I'm doing it as you suggested:

    Code:
    $(':checkbox').trigger('click');
    The code that should be run after a click event is the one I have posted before:

    Code:
    $(function() {
    	
    	$(':checkbox').click(function() {
    		if ($(this).is(':checked')) {
    			var colonna = $(this).attr("value");
    			$('#'+colonna).show();
    			$('.'+colonna).show();
    		} else {
    			var colonna = $(this).attr("value");
    			$('#'+colonna).hide();
    			$('.'+colonna).hide();
    		}
    	})
    		
    	
    })
    for which you also suggested some improvements which I still have to implement :P

    .trigger() correctly triggers the click event on the checkboxes, but the code inside the third box is not executed.

    Let me know if you need further explanations.

  20. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by D3V4 View Post
    .trigger() correctly triggers the click event on the checkboxes, but the code inside the third box is not executed.

    Let me know if you need further explanations.
    I have an inkling of a suspicion that one of the possible causes might be that the trigger is occurring before the click event has a chance to exist, but I'm also puzzled about just what this third box is that you refer to?

    It would help if you could linked to a test page where the problem can be experienced, and the code can be examined with greater thoroughness.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #21
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    I have an inkling of a suspicion that one of the possible causes might be that the trigger is occurring before the click event has a chance to exist, but I'm also puzzled about just what this third box is that you refer to?
    The code inside the third code section in my previous post.

    It would help if you could linked to a test page where the problem can be experienced, and the code can be examined with greater thoroughness.
    We can share the screen if you want.

  22. #22
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I am confused, why wouldn't/doesn't this work?
    PHP Code:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <form>
        <input type="checkbox" value="Bike" /> I have a bike
        <input type="checkbox" value="Car" /> I have a car
        <input type="checkbox" value="Skateboard" /> I have a skateboard
    </form> 
    <script>
        $('input:checkbox').click(function() {
            if ($(this).is(':checked')) {
                alert($(this).val());
            }
        });
    </script> 

  23. #23
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by centered effect View Post
    I am confused, why wouldn't/doesn't this work?
    PHP Code:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <form>
        <input type="checkbox" value="Bike" /> I have a bike
        <input type="checkbox" value="Car" /> I have a car
        <input type="checkbox" value="Skateboard" /> I have a skateboard
    </form> 
    <script>
        $('input:checkbox').click(function() {
            if ($(this).is(':checked')) {
                alert($(this).val());
            }
        });
    </script> 
    This does work, it's this that doesn't:

    Code:
    $('input:checkbox').trigger('click');
    The code that should be executed isn't, even if the click event has been triggered.

  24. #24
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I didn't read the whole thread, now that I did, more information is needed (site, addtl code, etc)

  25. #25
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by centered effect View Post
    Sorry, I didn't read the whole thread, now that I did, more information is needed (site, addtl code, etc)
    I would need too much time to set up a testing environment, I am ready to do some screen sharing though.


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
  •