Comment changer la couleur de la case étiquette en appuyant cochée/décochée de l'état sur le clic

Je suis en train de changer la couleur de police et la couleur de fond de mon étiquette de checkbox quand j'ai cocher ou décocher. J'ai trouvé une solution d'activer javascript sur ce site mais je n'ai pas été en mesure de rendre le code du travail. Voici ce que j'ai essayé jusqu'à présent. Maintenant, c'est d'attacher le "highlight" de la classe à la div parent et je veux seulement l'étiquette de changer. Merci pour votre temps.

HTML:

<div class="checkboxes">
    <input type="checkbox" name="1" id="option one" value="orange"><label for="1" class="highlight">Orange</label>
    <input type="checkbox" name="2" id="option two" value="apple"><label for="1" class="highlight">Apple</label>
</div>

JavaScript:

$( '.checkboxes' ).on( 'click', 'input:checkbox', function () {
    $( this ).parent().toggleClass( 'highlight', this.checked );
}); //end checkbox style​

CSS:

.checkboxes label {
    font-family:Open Sans Italic;
    font-size: 12px;
    color: #666;
    border-radius: 20px 20px 20px 20px;
    background: #f0f0f0;
    padding: 3px 10px;
    text-align: left;
}
.highlight {
    font-family:Open Sans Italic;
    font-size: 12px;
    color: white;
    border-radius: 20px 20px 20px 20px;
    background: #86b3c1;
    padding: 3px 10px;
    text-align: left;
}

OriginalL'auteur Ansh | 2012-07-22

  1. 3

    L'étiquette vient après la case, votre code semble être destiné à un label qui est d'emballage de la case, comme suit:

    <label for="1" class="highlight">Orange
    <input type="checkbox" name="1" id="option one" value="orange">
</label>

    De modifier le html ou modifier le JS pour cible l'élément suivant et pas le plus proche parent de l'élément:

    $( '.checkboxes' ).on( 'click', 'input[type="checkbox"]', function () {
    $( this ).next('label').toggleClass( 'highlight', this.checked );
});

    Aussi, votre CSS est défectueux, et le ciblage de l'étiquette directement prendra presedence sur le point culminant de la classe, de sorte qu'il ne changera jamais de couleur, même si la classe est appliquée.

    Ici un violon, j'ai corrigé en étant plus précis lorsque le ciblage de la highligth classe:

    VIOLON

    Et Raminson est correct, vous devez cibler la case avec des crochets et type="".

    Merci de remarquer mon erreur! Il a changé le JS. Toutefois, il ressemble à ma propriété css de .des cases à cocher label {} est primordial .mettez en surbrillance de la classe si l'étiquette n'est pas en train de changer. Comment pourrais-je résoudre ce problème?
    J'ai déjà répondu à ça, mais j'ai édité la réponse et le violon pour montrer comment.
    vous pouvez modifier le css sélecteur de .highlight à label.highlight.
    merci! qui fonctionne. merci pour le css faille. je vais corriger cela d'abord pour faire ce travail correctement

    OriginalL'auteur adeneo

  2. 8

    Vous pouvez le faire en utilisant simplement CSS:

    input[type=checkbox]:checked + label { /* styles that get changed */ }

    démo http://dabblet.com/gist/3157721

    Aussi, tout en produisant la démo que j'ai remarqué un couple de questions:

    • id="option one" - l'id doit être unique et vous ne pouvez pas avoir des espaces
    • la valeur de la for attribut de la label devrait être le id (pas name) de l'correspondant input; cela vous permet également de cocher/décocher la case à cocher en cliquant sur l'étiquette et non sur la case elle-même
    +1 pour sa simplicité!
    wow. merci. vraiment facile!
    merci encore! la démo est vraiment utile. j'ai corrigé le for et l'id.

    OriginalL'auteur Ana

  3. 2

    closest() ne trouve pas l'élément le plus proche de l'élément sélectionné. il trouve que le parent le plus proche, vous pouvez utiliser next() méthode, essayez les solutions suivantes:

    Obtenir le premier élément qui correspond au sélecteur, en commençant à l'élément en cours et progresse jusqu'à travers l'arborescence DOM.

    $('.checkboxes').on('click', 'input[type="checkbox"]', function () {
     $(this).next('label').toggleClass('highlight', this.checked);
});

    veuillez noter que :checkbox sélecteur est deprecated.

    Merci pour la réponse et pour souligner la bonne méthode de ciblage de la case.

    OriginalL'auteur undefined