Выберите один элемент за раз, используя jquery

Question

У меня есть флажки с несколькими входами, завернутые в теги p <p><input type="checkbox" /></p>. Я пытаюсь изменить background-color тега P, когда флажок установлен :checked Проблема, с которой я столкнулся, заключается в том, что все фоновые цвета тегов <p> </p> меняются в одно и то же время. Я хочу, чтобы текущий тег абзаца background-color изменился.

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

Используйте closest:

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

---

Вы также можете сделать это немного короче, используя toggleClass:

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

Answer 2

Использование this isntead из всего p. Тогда получить его родителей, используя .parent()

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

Answer 3

Вы можете настроить таргетинг на родительский пункт с closest() и использовать toggleClass() для переключения класса, а change событие было бы правильное событие для прослушивания при изменении флажка:

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

FIDDLE