如何在jQuery中切换属性

Question

我正在尝试使用图像作为复选框.以下可以正常工作,如果它是无线电而不是我目标的复选框,但复选框问题是我无法通过选择后再次单击它来选择元素.

// image checkbox
$('#imageCheckBoxes img').click(function() {
    $(this).parent('span').find('input:checkbox').attr('checked', 'checked');
});

<div id="imageCheckBoxes">
    <ul>
        <li><a href="">Africa</a>  <span><img src="images/checkbox-inactive.png" /><input type="checkbox" name="" value="" /></span>
        </li>
        <li><a href="">Asia/Pacific Islands</a>  <span><img src="images/checkbox-inactive.png" /><input type="checkbox" name="" value="" /></span>
        </li>
        <li><a href="">Australia</a>  <span><img src="images/checkbox-inactive.png" /><input type="checkbox" name="" value="" /></span>
        </li>
        <li><a href="">Central/South America</a>  <span><img src="images/checkbox-inactive.png" /><input type="checkbox" name="" value="" /></span>
        </li>
        <li><a href="">Europe/Russia</a>  <span><img src="images/checkbox-inactive.png" /><input type="checkbox" name="" value="" /></span>
        </li>
        <li><a href="">North America</a>  <span><img src="images/checkbox-inactive.png" /><input type="checkbox" name="" value="" /></span>
        </li>
        <li><a href="">United Kingdom</a>  <span><img src="images/checkbox-inactive.png" /><input type="checkbox" name="" value="" /></span>
        </li>
    </ul>
</div>

我需要基本上切换检查attr()部分.

怎么做？

Answer 1

我通过将函数传递给prop(自jQuery 1.6 attr之前)来实现这一点.其返回值设置为新属性值.

$(this)
    .closest('li')
        .find('input:checkbox').prop('checked', function(idx, oldProp) {
            return !oldProp;
        });

这里的关键事实是,你可以通过true或false以prop设置checked属性. oldProp是属性的现有值(将是true或者false),!oldProp反转也是如此:已选中元素未选中,反之亦然.

请注意,我还更改了代码以查找最接近的祖先li元素closest,这应该更加可靠和有效.