javascript - 如何添加 css 并选中复选框上的关联跨度？

Question

我想将类添加到使用以下代码选中的复选框上的关联范围。实际上我想将“text-decoration-line”、“line-through”添加到关联的复选框范围中。

但是现在，当我单击第一个复选框时，CSS 适用于所有范围，如代码所示。

$(document).ready(function() {
  $('input[type=checkbox]').change(function() {
    if (this.checked) {
      $(".label-text").css("text-decoration-line", "line-through");
    } else {
      $(".label-text").css("text-decoration-line", "none");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p-3 bg-white">
  <div class="d-flex align-items-center">
    <label>
    <input type="checkbox" class="option-input radio">
    <span class="label-text">Task list and assignments</span>
    </label>
  </div>
  <div class="d-flex align-items-center">
    <label>
    <input type="checkbox" class="option-input radio">
    <span class="label-text">Set due date and assignments</span>
    </label>
  </div>
  <div class="d-flex align-items-center">
    <label>
    <input type="checkbox" class="option-input radio">
    <span class="label-text">Remove duplicate tasks and stories</span>
    </label>
  </div>
  <div class="d-flex align-items-center">
    <label>
    <input type="checkbox" class="option-input radio">
    <span class="label-text">Update the userflow and stories</span>
    </label>
  </div>
  <div class="d-flex align-items-center">
    <label>
    <input type="checkbox" class="option-input radio">
    <span class="label-text">Adjust the components</span>
    </label>
  </div>
</div>

Answer 1

您可以使用.next()要获取下一个元素，问题是您正在对类进行选择，该类将 CSS 应用于所有元素，以下是如何做到这一点:

$(document).ready(function() {
  $('input[type=checkbox]').change(function() {
    $(this).next().css("text-decoration-line", this.checked ? "line-through" : "none" );
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p-3 bg-white">
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Task list and assignments</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Set due date and assignments</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Remove duplicate tasks and stories</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Update the userflow and stories</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Adjust the components</span></label></div>
</div>