4

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

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
    }   
})
4

1 回答 1

3

在你的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
}

示例场景

于 2013-06-26T23:10:12.093 回答