Check if a checkbox is checked not working

JavaScript
21

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

I am confused, why wouldn’t/doesn’t this work?


<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

This does work, it’s this that doesn’t:


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

The code that should be executed isn’t, even if the click event has been triggered.

24

Sorry, I didn’t read the whole thread, now that I did, more information is needed (site, addtl code, etc)

25

I would need too much time to set up a testing environment, I am ready to do some screen sharing though.

26

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!

27

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.

28

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.

29

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.

30

It works correctly in the online version.

31

So we ask, what is different in the script, between the two versions?

32

As far as I remember, nothing.

33

If there was nothing wrong then you wouldn’t be facing a problem.

Compare the expand.js scripts from both sources. You should find that there is a difference between them that is worth investigating.

34

You are right, in one I trigger the click event, while in the other I edit the checked attribute.

35

Now that I’ve understood what the difference is, can you help me understand while it’s not working correctly in either versions? :smiley:

36

Before you were saying that it works correctly in the online version.

Have you changed something there to make it not work?

37

No, we are losing control here XD

With “it works correctly in the online version” I mean that the checkboxes are ticked or unticked correctly (and not in the opposite way, like in the test page).

The problem is still there though. Please do the following steps to make the problem appear:

  • go to the online version and login with the test credentials
  • untick the Tipo column to hide it (this works)
  • click on Espandi
  • the table is expanded, all the checkboxes become ticked, also the Tipo checkbox (correct), but the Tipo column is not shown again, even if now it’s ticked (problem).
38

Do it with the Indirizzo checkbox or the others after it, and you might understand why it is happening.

Untick Indirizzo and click Espandi and Contrai, and you’ll see that the column is being toggled blindly.

You need the state of the checkbox to determine whether a column is shown or not. Currently that’s not happening. Currently, the Espandi and Contrai is just blindly toggling the columns, without paying attention to whether they are already in their correct state.

39

I don’t.

You need the state of the checkbox to determine whether a column is shown or not. Currently that’s not happening. Currently, the Espandi and Contrai is just blindly toggling the columns, without paying attention to whether they are already in their correct state.

Shouldn’t it work automatically, since the click event (and therefore the part of the code that hides or shows the columns) is triggered when the user clicks on Espandi?

And should I add this check in stampa.js or in expand.js?

40

Instead of this:

$(‘#indirizzo’).toggle();

You need to use:
$(‘#indirizzo’).toggle( showOrHide )

You can have the script decide whether to show or hide, depending on if the checkbox is already checked.

If the checkbox is currently checked, you want showOrHide to be true so that the column gets shown.
If it’s not already checked, you want showOrHide to be false.


var showOrHide = $(':checkbox[value="indirizzo"]:checked').length > 0;
$('#indirizzo').toggle( showOrHide );

Or if you want a one-liner:


$('#indirizzo').toggle($(':checkbox[value="indirizzo"]:checked').length > 0);