Sélectionnez un élément à la fois à l'aide de jquery

Question

J'ai plusieurs cases à cocher d'entrée enveloppées dans les étiquettes p <p><input type="checkbox" /></p>. J'essaie de changer le background-color de la balise P lorsque la case à cocher est :checked Le problème que j'ai est que toutes les couleurs d'arrière-plan <p> </p> changent en même temps. Je veux seulement que l'étiquette de paragraphe actuelle background-color change.

HTML

<p> 
    <input type="checkbox" /> 
    <label>Animals &amp; Pets</label> 
</p> 

<p> 
    <input type="checkbox" /> 
    <label>Business &amp; Finance</label> 
</p> 

<p> 
    <input type="checkbox" /> 
    <label>Auto's &amp; Cycles</label> 
</p> 

CSS

.highlight { background-color: #DDD; } 

jQuery

$(document).ready(function() { 
    $('input').click(function() { 
    if ($(this).is(':checked')) { 
    $('p').addClass('highlight') 
    } else { 
    $('p').removeClass('highlight') 
    } 
    }); 
}); 

Answer 1

Utilisez closest:

$('input').change(function() { 
    if (this.checked) { 
     $(this).closest('p').addClass('highlight'); 
    } else { 
     $(this).closest('p').removeClass('highlight'); 
    } 
}); 

---

Vous pouvez aussi faire un peu plus court en utilisant toggleClass:

$('input').change(function() { 
    $(this).closest('p').toggleClass('highlight', this.checked); 
}); 

Answer 2

utilisation this isntead de seulement p. Ensuite, obtenir son parent à l'aide .parent()

$(document).ready(function() { 
     $('input').click(function() { 
     if ($(this).is(':checked')) { 
      $(this).parent().addClass('highlight') 
      } else { 
       $(this).parent().removeClass('highlight') 
      } 
    }); 
    }); 

Answer 3

Vous pouvez cibler le paragraphe parent avec closest() et utiliser toggleClass() pour activer la classe, et l'événement change serait l'événement propre à écouter lors de la modification d'une case à cocher:

$(document).ready(function() { 
    $('input').on('change', function() { 
     $(this).closest('p').toggleClass('highlight', this.checked); 
    }); 
}); 

FIDDLE