jQuery - 用图片替换样式化复选框

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代码：

这里是HTML：

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

编辑：此外，这是否是样式化复选框的最佳方法？我似乎找不到比这更简单的方法，所以如果有建议，请告诉我。

- ohiock

---

它应该可以正常工作：http://jsfiddle.net/SaEYH/. - VisioN

顺便提一下：$('.check') 等同于 $('input[type=checkbox]')，因此在 jQuery 中不需要设置类。 - feeela

我已经删除了页面上的所有其他jQuery脚本，但它仍然无法正常工作，您有什么想法我可能做错了什么？ - ohiock

一个经典的解决方案：http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ - biziclop

你在倒数第二个括号后面缺少了一个分号。 - StrikeForceZero

Answer 1

原来我使用的是过时的jQuery版本，这就是问题所在。我更新到1.7.2版本后，一切按照预期正常运行。

- ohiock

---

源代码的工作效果如此。可以正常运行的版本是1.7.2，但我不知道之前是什么版本。 - ohiock

Answer 2

知道这是一个较旧的线程 - 但需要将复选框转换为图像的解决方案 - 这是最好的答案。 :) 因此，对其进行了重构并希望分享。

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

- Lance Larsen - Microsoft MVP

Answer 3

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

- Tillito

---

很遗憾，Ryan Fait已经去世，这个页面不再有效。 - DeveloperChris

Answer 4

您还可以使用这个名为Zebra_Transform的jQuery插件，它可以转换页面上的所有复选框、单选按钮和下拉框，非常小巧（3KB），并且在所有主要浏览器中都可以使用。

- Stefan Gabos