javascript - 使用图像作为复选框占位符

Question

基本上，我试图在选中/取消选中复选框时交换图像，但我无法弄清楚为什么第二次单击图像时不会发生“取消选中”(控制台从不打印“取消选中”) .

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

它在您的 prop() 方法中。现在您将 checked 属性指定为 false，而实际上您应该只检查是否为 false。

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

Example scenario