jQuery Style de case à cocher, la remplacer par l'image

J'ai besoin de ce script pour cacher mes cases à cocher et de mettre une image d'un style de case à cocher à la place de. C'est bien le cacher et de montrer l'image par défaut, mais il ne sera pas de mise à jour de la case à cocher ou décocher la case une fois que je clique sur elle, ni de mise à jour de l'image. Je suis en supposant que c'est une chose simple, je suis dominant, je suis encore nouveau pour jQuery.

Voici le script:

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

Voici le code HTML:

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

Edit: Aussi, est-ce la meilleure approche pour le style des cases à cocher? Je n'arrive pas à trouver quelque chose qui est beaucoup plus facile que cela, de sorte que toutes les suggestions sont les bienvenues.

Il devrait fonctionner: jsfiddle.net/SaEYH.
BTW: $('.check') == $('input[type=checkbox]'), donc pas besoin de définir des classes pour jQuery.
J'ai supprimé tous les autres scripts jQuery sur la page et ça ne marche toujours pas, toutes les idées à ce que je pouvais faire de mal?
Une solution classique: ryanfait.com/resources/custom-checkboxes-and-radio-buttons
il vous manque un point-virgule après la fermeture de parenthèses (2e à partir de la bas)

OriginalL'auteur ohiock | 2012-06-25

  1. 2

    Il s'avère que j'ai été en utilisant une ancienne version de jQuery, qui était le problème. J'ai mis à jour 1.7.2 et tout a fonctionné comme il se doit.

    pas de changement de la source dans votre exemple? la version qui a travaillé?
    Le code Source fonctionne comme on dirait ici. La version qui a travaillé était 1.7.2, mais je ne sais pas ce que c'était avant que.

    OriginalL'auteur ohiock

  2. 0

    vous pouvez également utiliser ce plugin jQuery appelé Zebra_Transform qui transforme toutes les cases à cocher, des boutons radio et des listes de sélection sur une page, il est très très petit (3KB), et fonctionne dans tous les principaux navigateurs.

    OriginalL'auteur Stefan Gabos

  3. 0

    J'ai essayé plusieurs solutions et le meilleur choix semble:
    http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
    Il est simple et fonctionne bien.

    Malheureusement, Ryan Fait est décédé et cette page n'est plus valide.

    OriginalL'auteur Tillito

  4. 0

    Sais que c'est un vieux thread -- mais avait besoin d'une solution pour la conversion des cases à cocher pour les images -- et c'était la meilleure réponse. 🙂 Donc refactorisé certains et je voulais le partager.

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

    OriginalL'auteur Lance Larsen - Microsoft MVP