Question

我在p标签<input type="checkbox" />中包含了多个输入复选框。当复选框为background-color时，我正在尝试更改P标记的:checked我遇到的问题是所有 标记背景颜色同时发生变化。我只希望更改当前段落标记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);
    });
});

FIDDLE

Answer 3

使用this代替p。然后使用.parent()

获取其父级

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

使用jquery一次选择一个元素

3 个答案: