Using Image as a Flag

Question

Basically, I try to exchange images when the checkboxes are checked / unchecked, but I can’t understand why “unchecking” never occurs when the image is clicked a second time (the console never prints “Disarm”).

HTML:

<div id="inventory"> <div class="nav"> <div class="categories"> <input type="checkbox" name="category" value="top"> <input type="checkbox" name="category" value="bottom"> <input type="checkbox" name="category" value="shoes"> <input type="checkbox" name="category" value="accessories"> <input type="checkbox" name="category" value="hairstyles"> <input type="checkbox" name="category" value="eyes"> <input type="checkbox" name="category" value="heads"> <input type="checkbox" name="category" value="skins"> <input type="checkbox" name="category" value="avatars"> <a href="#" class="placeholder top"></a> <a href="#" class="placeholder bottom"></a> <a href="#" class="placeholder shoes"></a> <a href="#" class="placeholder accessories"></a> <a href="#" class="placeholder hairstyles"></a> <a href="#" class="placeholder eyes"></a> <a href="#" class="placeholder heads"></a> <a href="#" class="placeholder skins"></a> <a href="#" class="placeholder avatars"></a> </div> </div> </div> 

JS / jQuery:

 $('#inventory .nav .categories .placeholder').click(function(e){ e.preventDefault(); var category = $(this).attr('class').split(' ')[1]; //Grab second class of the clicked placeholder var relatedCheckbox = $('#inventory .nav .categories input[value="' + category + '"]'); //find the actual related checkbox if (relatedCheckbox.prop('checked', false)) { //if the related checkbox is unchecked... console.log('check it!'); relatedCheckbox.attr('checked', 'checked') //check it! } else { //if it is already checked console.log('UNcheck it!'); relatedCheckbox.removeAttr('checked'); //uncheck it } }) 

Answer 1

This is in your prop() method. Right now, you set the checked property to false if you really should just check false or not.

 if (!relatedCheckbox.prop('checked')) { relatedCheckbox.prop('checked',true) // <--use this to check it } else { relatedCheckbox.prop('checked',false) // <-- use this to uncheck it } 

Scenario example