javascript - 使用 jquery 一次选择一个元素

Question

我有多个输入复选框包裹在 p 标签中 <p><input type="checkbox" /></p> .我正在尝试更改 background-color复选框为 :checked 时的 P 标签我遇到的问题是所有 <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);
});