Question

我需要这个脚本来隐藏我的复选框并放置一个样式复选框的图像来代替它。它正确地隐藏它并显示默认图像，但是一旦我点击它就不会更新复选框以选中或取消选中它，也不会更新图像。我假设这是一个我忽略的简单事情，我仍然是jQuery的新手。

这是脚本：

        $(".check").each(function() {
            $(this).hide();

            var $image = $("<img src='assets/images/layout/checkbox/unchecked.png' />").insertAfter(this);    

            $image.click(function() {
                var $checkbox = $(this).prev(".check");
                $checkbox.prop('checked', !$checkbox.prop('checked'));

                if($checkbox.prop("checked")) {
                    $image.attr("src", "assets/images/layout/checkbox/checked.png");
                } else {
                    $image.attr("src", "assets/images/layout/checkbox/unchecked.png");
                }
            })
        });

这是HTML：

<input type="checkbox" class="check" />

编辑：此外，这通常是样式复选框的最佳方法吗？我似乎找不到比这更容易的东西，所以任何建议都值得赞赏。

Answer 1

事实证明我使用的是日期版本的jQuery，这就是问题所在。我更新到1.7.2，一切正常。

Answer 2

你也可以使用这个名为Zebra_Transform的jQuery插件来转换页面上的所有复选框，单选按钮和选择框，它非常小（3KB），适用于所有主流浏览器。

Answer 3

我尝试了几种解决方案，最佳选择似乎是： http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ 这很简单，效果很好。

Answer 4

知道这是一个较老的线程 - 但需要一个将复选框转换为图像的解决方案 - 这是最好的答案。 :)所以重构了一些并想分享。

function setCheckboxImageSrc(checkbox, image, checkedUrl, uncheckedUrl) {
    if (checkbox.is(":checked")) {
        image.attr("src", checkedUrl);
    } else {
        image.attr("src", uncheckedUrl);
    }
}

function setCheckboxImage(checkboxObj, className, checkedUrl, uncheckedUrl) {
    checkboxObj.hide();

    var $image = $("<img src='" + checkedUrl + "' />").insertAfter(checkboxObj);
    setCheckboxImageSrc(checkboxObj, $image, checkedUrl, uncheckedUrl);

    $image.click(function () {
        var $checkbox = $image.prev("." + className);
        $checkbox.click();
        setCheckboxImageSrc($checkbox, $image, checkedUrl, uncheckedUrl);
    });
}

$(".checkboxUp").each(function () {
    setCheckboxImage($(this), "checkboxUp", "../../../images/DirectionUpChecked.png", "../../../images/DirectionUpUnchecked.png");
});

$(".checkboxDown").each(function () {
    setCheckboxImage($(this), "checkboxDown", "../../../images/DirectionDownChecked.png", "../../../images/DirectionDownUnchecked.png");
});

jQuery - 样式复选框，替换为图像

4 个答案: