SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 43

Hybrid View

  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,729
    Mentioned
    104 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,729
    Mentioned
    104 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,729
    Mentioned
    104 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,729
    Mentioned
    104 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

  10. #10
    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?

  11. #11
    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

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 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

  13. #13
    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.

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 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

  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
    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.

  16. #16
    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> 

  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 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.

  18. #18
    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)

  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 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.

  20. #20
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I've prepared a small test folder with a simple HTML page and all the Javascript that I use: test.zip

    To make the problem happen: click on the checkbox "Tipo" to hide the column with the same name. Click on it again to show it again. Up to this point everything works. Now click on it again to hide it and then click on "Espandi la tabella". You can see that the checkbox is being checked again but the column remains hidden.

    Thank you very much in advance for your help!

  21. #21
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Clicking on Espandi causes the Tipo section to show, but the checkbox becomes unticked. When you then check the Tipo checkbox, it tries to show the Tipo section but it's already shown, so you get the impression that nothing has happened. When you uncheck the Tipo checkbox it hide again.

    It seems that all of the checkboxes have been told to be the complete opposite of what they should be.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  22. #22
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LOL I just realized that this is not the exact behavior that I get in my local testing environment XD Here, if I click on Espandi the checkbox remains ticked.

    Anyway, how do you suggest I solve this problem?

    Edit: I've created a test account on an actual running online version, so show you how the behavior of the script is different. Go to http://domus.danielpellarini.com and login using the credentials "test" "test".

    You can see here that clicking on Espandi ticks or unticks the checkboxes correctly, but still, if you go through the steps that I've written above to make the problem show, the column is not shown again if you click on Espandi after hiding it.

  23. #23
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I suggest that you first get the checkboxes to corresponding with the visible columns.

    Once you do that, we can move on to other issues that may remain.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  24. #24
    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 suggest that you first get the checkboxes to corresponding with the visible columns.

    Once you do that, we can move on to other issues that may remain.
    It works correctly in the online version.

  25. #25
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by D3V4 View Post
    It works correctly in the online version.
    So we ask, what is different in the script, between the two versions?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •