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是反转：已选中的元素未选中，反之亦然。

请注意，我还更改了您的代码，以查找距离closest最近的祖先li，这应该更加可靠和有效。

Answer 2

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

$.fn.toggleAttr = function(a, b) {
    var c = (b === undefined);
    return this.each(function() {
        if((c && !$(this).is("["+a+"]")) || (!c && b)) $(this).attr(a,a);
        else $(this).removeAttr(a);
    });
};

请注意，这是兼容xhtml的，适用于“禁用”，“已启用”，“已选中”，“已选中”等属性。

使用示例（适用于您的场景）：

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

编辑 - 尽管artlung指出 - 标签可能最适合您的场景

Answer 3

另一种可能的方法：

$('#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，并简单地在图片周围添加<label>标签，然后将它们与您的复选框相关联以获得相同的效果。只需使用<span>替换html中的<label>。

Answer 4

试试这个。

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

Answer 5

我的解决方案更聪明一点：

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");
        }
    });
});

如何在jQuery中切换属性

5 个答案: