jQuery - Casilla de verificación de estilo, reemplace con la imagen

Question

Necesito este script para ocultar mis casillas de verificación y poner una imagen de una casilla con estilo en lugar de esta. Está escondiéndolo correctamente y mostrando la imagen predeterminada, pero no actualizará la casilla de verificación para marcarla o desmarcarla una vez que haga clic en ella, ni actualizará la imagen. Asumo que es algo simple que estoy pasando por alto, todavía soy nuevo en jQuery.

Aquí está la secuencia de comandos:

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

Aquí está el código HTML:

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

Editar: También, es por regla general, el mejor enfoque para casillas de verificación de estilo? Parece que no puedo encontrar nada que sea mucho más fácil que esto, por lo que cualquier sugerencia es apreciada.

Answer 1

Resulta que estaba usando una versión anticuada de jQuery, que era el problema. Actualicé a 1.7.2 y todo funcionó como debería.

Answer 2

También podría utilizar este complemento jQuery llamado Zebra_Transform que transforma todas las casillas de verificación, botones de opción y cuadros de selección en una página, es muy pequeño (3KB) y funciona en todos los navegadores principales.

Answer 3

Probé varias soluciones y la mejor opción parece: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ Es simple y funciona bien.

Answer 4

Sepa que este es un hilo más antiguo, pero necesitaba una solución para convertir casillas de verificación en imágenes, y esta fue la mejor respuesta. :) Así que refactoré un poco y quería compartir.

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