jQuery Checkbox 未选中检测问题

Question

所以我尝试使用 jquery 来检测复选框何时被选中和取消选中（通过单击我应该添加的标签）来更改 css 属性。

这里是复选框的代码示例：

<div class="block" id="block_1">
   <input type="checkbox" name="images" id="image_1" class="block_input" />
   <label for="image_1" class="block_button" style="background-image:url(img/bnw/block_1bnw.png);">
   <span>Label text</span></label>
</div>

这是我到目前为止只有一半工作的 jQuery：

$('.block_button').click(function(){
    var imgId = $(this).parent().attr('id');

    if ($(this).siblings('.block_input').checked == true) {
        $(this).css("background-image", "url(img/color/" + imgId + ".png)");
    } else {
        $(this).css("background-image", "url(img/bnw/" + imgId + "bnw.png)");
    }
});

当您最初选中该框时，css 会正确更改，但一旦取消选中，则不会发生任何变化。我尝试在单击时记录 .checked 方法的结果，即使您取消选中它似乎也保持真实。那么一旦用户决定取消选中该框，我如何让 else 语句起作用？

谢谢！！

Answer 1

JQuery 对象没有“已检查”属性，因此它永远不会评估为真。

要通过相应的 JQuery 对象访问 HTML 元素的属性，您必须使用 .prop() 方法。或者，换句话说……

$('.block_button').click(function(){
    var imgId = $(this).parent().attr('id');

    if (! $(this).siblings('.block_input').prop('checked')) {
        $(this).css("background-image", "url(img/color/" + imgId + ".png)");
    } else {
        $(this).css("background-image", "url(img/bnw/" + imgId + "bnw.png)");
    }
});

注意，我还加了一个“！”在 if 语句中，因为此函数在复选框的状态更改之前触发。所以这里的状态与点击事件完成传播后的状态相反。

还有另一种更有意义的方法：

$('.block_input').change(function(){
    var imgId = $(this).parent().attr('id');

    if ($(this).prop('checked')) {
        $(this).siblings('.block_button').css("background-image", "url(img/color/" + imgId + ".png)");
    } else {
        $(this).siblings('.block_button').css("background-image", "url(img/bnw/" + imgId + "bnw.png)");
    }
});

这样，您定义的函数会在输入更改之后调用，而不是之前。如果用户单击复选框本身，它也会被触发，而不仅仅是它旁边的图像。 （如果您的用户在页面上切换，这很有用）

希望这会有所帮助！

Answer 2

我相信你的错误在这里：

if ($(this).siblings('.block_input').checked = true) {

应该是== 而不是=。事实上，你可以写成：

if ($(this).siblings('.block_input').checked) {

发生了什么：当该行运行时，您将checked 的值设置为true。这会覆盖之前的 checked 值。

编辑：需要进行一些更改才能获得rudimentary working example (JSFiddle)。

1. 更改复选框更改时要触发的事件，而不是从标签的角度。这也将捕获用户单击复选框本身，或通过其他方式（例如，通过键盘）更改复选框的状态。

   $('.block_input').change(function(){

2. 检查属性.checked（有关详细信息，请参阅this SO answer），如下所示：

   if ($(this).prop('checked')) {

3. 现在事件在复选框上被触发，你需要修改你对标签的引用：

   $(this).siblings('.block_button').css( ...