5

我需要这个脚本来隐藏我的复选框并放置一个样式复选框的图像来代替它。它正确隐藏它并显示默认图像，但是一旦我单击它，它不会将复选框更新为选中或未选中，也不会更新图像。我假设这是我忽略的一件简单的事情，我还是 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" />

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

4

4 回答 4

2

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

于 2012-07-14T16:04:31.140 回答
0

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

于 2012-07-21T14:32:23.440 回答
0

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

于 2012-12-06T10:13:47.677 回答
0

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

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");
});
于 2015-10-20T21:53:23.677 回答