Hộp kiểm jQuery - Kiểu, thay thế bằng hình ảnh

Question

Tôi cần tập lệnh này để ẩn các hộp kiểm của mình và đặt hình ảnh của hộp kiểm được tạo kiểu thay cho nó. Nó đúng cách ẩn nó và hiển thị hình ảnh mặc định, nhưng nó sẽ không cập nhật hộp kiểm để kiểm tra hoặc bỏ chọn khi tôi nhấp vào nó, và cũng không cập nhật hình ảnh. Tôi cho rằng đó là một điều đơn giản tôi nhìn, tôi vẫn còn mới với jQuery.

Đây là kịch bản:

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

Dưới đây là HTML:

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

Edit: Ngoài ra, đây là nói chung là cách tiếp cận tốt nhất để hộp kiểm phong cách? Tôi dường như không thể tìm thấy bất cứ điều gì dễ dàng hơn thế này, vì vậy mọi đề xuất đều được đánh giá cao.

Answer 1

Hóa ra tôi đang sử dụng phiên bản jQuery ngày, đó là vấn đề. Tôi cập nhật lên 1.7.2 và mọi thứ hoạt động như mong muốn.

Answer 2

bạn cũng có thể sử dụng plugin jQuery này được gọi là Zebra_Transform để chuyển đổi tất cả các hộp kiểm, nút radio và hộp chọn trên trang, rất nhỏ (3KB) và hoạt động trên tất cả các trình duyệt chính.

Answer 3

Tôi đã thử một số giải pháp và lựa chọn tốt nhất có vẻ như: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ Đơn giản và hoạt động tốt.

Answer 4

Biết đây là một chuỗi cũ hơn - nhưng cần một giải pháp để chuyển đổi hộp kiểm thành hình ảnh - và đây là câu trả lời hay nhất. :) Vì vậy, refactored nó một số và muốn chia sẻ.

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