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

これは古いスレッドであることを知っていますが、チェックボックスを画像に変換するための解決策が必要でした.これが最良の答えでした. :) それで、いくつかリファクタリングして共有したいと思いました。

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 に答える
0

私はいくつかの解決策を試しましたが、最良の選択のようです: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ シンプルでうまく機能します。

于 2012-12-06T10:13:47.677 に答える
0

ページ上のすべてのチェック ボックス、ラジオ ボタン、および選択ボックスを変換するZebra_Transformという jQuery プラグインを使用することもできます。これは非常に小さく (3KB)、すべての主要なブラウザーで動作します。

于 2012-07-21T14:32:23.440 に答える