jQuery - Стиль checkbox, заменить на картинку

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" /> 

Edit: Кроме того, это вообще лучший подход к стилизации флажков? Я не могу найти ничего, что намного проще, чем это, поэтому любые предложения приветствуются.

Answer 1

Оказалось, что я использую устаревшую версию jQuery, которая была проблемой. Я обновился до 1.7.2, и все сработало так, как должно.

Answer 2

Вы также можете использовать этот плагин jQuery под названием Zebra_Transform, который преобразует все флажки, переключатели и поля выбора на странице, он очень мал (3 КБ) и работает во всех основных браузерах.

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