如何在jQuery中切换属性

我尝试使用图像作为复选框。如果我瞄准的是收音机而不是复选框，那么下面的操作就可以了，但是有了复选框，问题是我无法通过在选择元素后再次单击它来选择元素

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

我需要基本上切换check

attr（）

部分

---

如何做到这一点？

我会通过将函数传递给

prop

（从jquery1.6开始，

attr

之前）。此属性的返回值设置为新属性值

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

这里的关键事实是，您可以将

true

或

false

传递给

prop

，以设置

checked

属性

oldProp

是属性的现有值（它将是

true

或

false

），因此

！oldProp

是反转：选中的元素被取消选中，反之亦然

请注意，我还更改了您的代码，以查找最接近的祖先

li

元素，这应该更可靠、更有效。

试试这个

$('#imageCheckBoxes img').click(function() {
    var el = $(this).parent('span').find('input:checkbox');
    if(el.is(':checked'))
        el.attr('checked', '');
    else
        el.attr('checked', 'checked');
});

---

另一种可能的办法：

$('#imageCheckBoxes').delegate('img', 'click', function(){
    var $associatedCheckbox = $(this).siblings('input:checkbox');
    if ($associatedCheckbox.is(':checked')){
        $(this).removeClass('checked');
        $associatedCheckbox.removeAttr('checked');
    } else {
        $(this).addClass('checked');
        $associatedCheckbox.attr('checked', 'checked');
    }
});

我使用的是

delegate（）

，不过您也可以使用标准的

click（）

或

bind（）

调用来添加监听函数

我还添加了一些代码来向图像中添加一个类。比如说，如果你想给用户提供视觉反馈，你可以在这些图像上用你的

.checked

类来实现

#imageCheckboxes img {
  border: 2px solid #fff;
}
/* feedback for your users! */
#imageCheckboxes img.checked {
  border: 2px solid #6f6;
}

---

现在，我觉得您也可以避免使用JavaScript，只需在图像周围放置

标记，然后将它们与复选框关联即可获得相同的效果。只需将html中的

替换为

就可以添加一个相当基本的jQuery扩展，其工作方式与“toggle（）”和“toggle（showOrHide）”相同，但用于属性-“toggleAttr（attribute）”和“toggleAttr（attribute，addOrRemove）”

注意，这是xhtml兼容的，并且是为诸如“禁用”、“启用”、“选中”、“选中”等属性而设计的

使用示例（针对您的场景）：

编辑-尽管正如artlung所指出的-标签可能最适合您的场景
我的解决方案更聪明一些：

var $formContainer = $(".form-container"),
    $myCheckbox = $formContainer.find(".my-checkbox"),
    $requiredFields = $formContainer.find("input[required], textarea[required], select[required]").removeAttr("required"); // remove the required attribute on all required form inputs
$myCheckbox.change(function () {
    $formContainer.toggle("fast", function() {
        if ($(this).is(":visible")) {
            $requiredFields.attr("required", true);
        }
        else {
            $requiredFields.removeAttr("required");
        }
    });
});

嗯，不行。使用您的代码，我仍然可以像以前一样选择复选框，但当我再次单击复选框时，复选框不会被取消选中。啊，好吧，它之前不起作用的原因是因为我在此处输入的代码的一部分中交换了复选框图像，所以当再次单击$（this）时，它不再是同一个图像。感谢您现在的工作。如果结构总是这样，
$（this）。next（）
也会工作。我最终使用了jquery的
切换类（）
。然而，我也喜欢你的解决方案。啊!！“prop”第二个参数的回调函数太棒了！回答得很好。我已经立即重构了if-else:）“我需要基本上切换check attr（）部分。”我不知道您如何解决这个问题。。。您只需提供一种选择元素的替代方法。但是原来的选择器也很好用。你是对的。我刚刚更新了答案。我的错，谢谢你抓住我的错误。三元运算符使代码更短：el.attr（'checked'，（el.is（':checked'））？''：'checked'）；使用
label
s可能是最好的主意+为此，在
中的内容周围使用
标记是最简单的方法。不需要JS非常类似于禁用的
：很好。对其进行扩展，使代码的其余部分更具可读性。
$('#imageCheckBoxes img').click(function() {
    $(this).parent('span').find('input:checkbox').toggleAttr('checked');
}

var $formContainer = $(".form-container"),
    $myCheckbox = $formContainer.find(".my-checkbox"),
    $requiredFields = $formContainer.find("input[required], textarea[required], select[required]").removeAttr("required"); // remove the required attribute on all required form inputs
$myCheckbox.change(function () {
    $formContainer.toggle("fast", function() {
        if ($(this).is(":visible")) {
            $requiredFields.attr("required", true);
        }
        else {
            $requiredFields.removeAttr("required");
        }
    });
});