javascript - 使用 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

您可以使用 , 来定位父段落closest()，并使用它toggleClass()来切换类，并且该change事件将是更改复选框时要监听的正确事件：

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

小提琴

Answer 3

使用thisnot 而不是 just p。然后让它的父母使用.parent()

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