jQuery - スタイルチェックボックス、画像で置き換えます

Question

私はこのチェックボックスを非表示にし、その代わりにスタイル付きチェックボックスのイメージを置くためにこのスクリプトが必要です。それを適切に隠してデフォルトの画像を表示していますが、クリックするとチェックボックスをオンまたはオフにしたり、画像を更新したりしません。私はそれが私が見落としている簡単な事だと仮定しています、私はまだjQueryを初めて使っています。

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

編集：

ここ

 $(".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である：ここでは

はスクリプトです。また、これは一般的なスタイリングのチェックボックスに最善のアプローチですか？私はこれよりはるかに簡単なものを見つけることができないようですので、どんな提案も感謝しています。

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