[help!] Trouble changing checkbox state with jQuery-JS

Question

Hi, I need some help with this.

I'm trying to make a game (you'll see it when I finish it :D), and there's is a point where jQuery is running an unexpected behavior:

I want to check if a checkbox is checked or not and change its state. My actual code is here. I've tried some solutions but no one is running well, I'll explain before code some issues:

$change = $('#' + $lie);
if ($change.prop('checked', true)) {
$change.prop('checked',false);
} else if ($change.prop('checked', false)) {
$change.prop('checked', true);
}

As you can see, the $change var is not a static one. Previously, I have some checkers with its unique ID. I verify all ID checkers and, with comparing characters of these ID I know which is incorrect (this is part of the game). Then, $lie is a text that corresponds with a concrete #id, that's why I make the line $change = ('#', + $lie); -> to convert the string into a valid ID to play with.

Then, I have to find the state of the checker. If it's checked I have to uncheck, and reverse. Here, code is making some mistakes:

- never checks, only unchecks
- sometimes uncheck correct one, sometimes no
- it's supossed to act ONCE, but sometimes uncheck two checkboxes :O

I'm going crazy with it, I've read many stackoverflow tips, documentation about .prop(), .is(), .checked and many other possible specs, but nothing helping me.

I'm not sure if you would need a bigger piece of code to get more info, but after many tries and debugging I'm pretty sure the problem is inside these.

Thanks for your help!

Answer 1

Hey there! I share with you the game, it's almost finished :)

Thanks for your help this afternoon!

https://code.sololearn.com/Wt5zSx421IPH/?ref=app

Answer 2

Very cool game. Nicely done! Oh... and thanks for sharing the link.

Answer 3

at that code change to

$change = $('#'+$lie);
if($change.prop('checked'))$change.prop('checked',false)
else $change.prop('checked',true)

but anyway that is slower than to use this

$change = $('#' + $lie);
$change.prop('checked',function(i,i2){
return !i2;
});

which have better interface
$change.prop('checked',true) << this return $change value not true or false or check. so you can do
$change.prop('checked',true).prop('checked',false);
this is called "chain"

And about "check only uncheck"
$change.prop('checked') << this will return true
$change.prop('checked',true) << isn't comparison at all

Answer 4

@Aaron - It sounds like you are expecting the line below to return [boolean: true or false] depending on whether or not the checkbox is selected.

$change.prop('checked', true)

The problem is by using the second parameter, in the line above, the prop() method does 2 different things than what you expected:

- First, by passing [boolean: true] as the 2nd parameter, the prop() method will add the 'checked' attribute to your checkbox. Therefore, this will always add a check to your checkbox.

- Second, after adding the 'checked' attribute, the prop() method will return $change object instead of a boolean value.

As you can see, your conditional if statement is actually updating the checkbox rather than evaluating the state of the checkbox.

The following should accomplish what you are attempting:

/* **************************** */
$change = $('#' + $lie);

if ($change.prop('checked')) {
$change.prop('checked', false);
} else {
$change.prop('checked', true);
}
/* **************************** */

A more succinct method of writing the above could also be:
/* **************************** */

$('#' + $lie).click(function() {
$(this).prop('checked', $(this).prop('checked'));
}
/* **************************** */

The above code essentially toggles the checkbox to the opposite value of the current checkbox state.

Answer 5

If you still have issues, it will be better if you share your code so I can review the full context of your code.

Answer 6

Thanks @Very_Hard, I've tried what you suggested while I was trying some other solutions (with no success), and it doesn't work well. I have some trouble with the scope of the $lie var. When I click button, it's supossed to $lie = ''; and after another function $lie gets a new value. This is correct, but when I pass $lie to this function it remembers previous value.

I'm copying here the complete skeleton of the functions that works with $lie:

var $lie = '';
function check() {
$lie = ''; // only for successive calls
if (something) {$lie changes here}
return $lie; //I've made some alerts here and it's working well always
}

function lying() {
if ($lie === something) {
// something related with "something"
}
}

function message($lie) {
// other stuff
$(some-div).on('click', function() {
// more stuff
$change = $('#' + $lie); // here $lie gets the first value, but not reset on successive tries, that's why program goes crazy
$change.prop('checked', function(i, i2) { // your suggestion
return !i2;
});
});
}

$(run-button).on('click', function(e) {
e.preventDefault();
check();
if ($lie !== '') { // do only if $lie have value
lying();
message($lie)
}
}

First time I execute the program $lie have a correct value and works properly. But next runs the $lie value is not reset and remember the previous value. I'm not sure where is the mistake, I've tried to reset $lie = ''; in many places, but ever is handling the first value to the message($lie) function.

Thanks for your help and your suggestions!

Answer 7

@David C thanks! I'll try and let you know, but I think I've tried a solution similar to what you say and I think the problem maybe could be in other part, probably related to the $lie var creation and updating. Thanks so much anyway! I'll try it!

Answer 8

@David thanks,

I've discovered that every time that I click on the div, because of this line:

$(some-div).on('click', function() {

I'm creating a new handler of the event, then, I've to swith off the listeners before switch on again:

$(some-div).off('click').on('click', function() {

Now is working well. I want to open the code and share with you, but I prefer to end the game and show you a running version. It's a surprise! :P

Thanks again for your help and recommendations, I really appreciate it!

Answer 9

Share it is the least I can do! B 😃😍