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:


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

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.

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…

Then you will want to attach a click event to the checkbox. Something like this should do the trick:


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

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.

This worked, thank you :slight_smile:

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 :slight_smile:

You know how this selects the checkbox with a value of tipo?


$(':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:


$(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();
		}
	})
		
	
})

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?

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.


$(function() {
    $(':checkbox').click(function() {
        var colonna = this.value,
            action = ($(this).is(':checked')) ? 'show' : 'hide';
        $('#' + colonna + ', .' + colonna)[action]();
    });
});

This is easier to understand than my previous code though:


$(function() {
    function triggerAction(name, action) {
        $('#' + name + ', .' + name)[action]();
    }

    $(':checkbox').click(function() {
        triggerAction(
            this.value,
            ($(this).is(':checked')) ? 'show' : 'hide'
        );
    });
});

Thanks for the suggestions, although I must say that I find the first version of the code easier to understand :smiley:

Do you have an answer for my last question too?

The elements’ click event will trigger no matter where the change is coming from.

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 :smiley: thanks for all your help, by the way :slight_smile:

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.

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.

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.

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:


$('input[type="checkbox"]').each(function() {
    			$(this).attr('checked', true);
    		})

Now I’m doing it as you suggested:


$(':checkbox').trigger('click');

The code that should be run after a click event is the one I have posted before:


$(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 :stuck_out_tongue:

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