Javascript 如何在选中关联的span on复选框的情况下添加css？

我想将该类添加到使用以下代码选中的关联的span on复选框中。实际上，我想将“文本装饰线”、“线通过”添加到关联的复选框范围中

但现在，当我点击第一个复选框时，css将应用于所有跨度，如代码所示

$（文档）.ready（函数（）{
$（'input[type=checkbox]'）。更改（函数（）{
如果（选中此项）{
$（“.label text”）.css（“文本装饰线”、“线通过”）；
}否则{
$（“.label text”）.css（“文本装饰线”、“无”）；
}
});
});

任务列表和作业
设定截止日期和作业
删除重复的任务和故事
更新用户流和故事
调整部件
我对html做了一些小的修改。因此，根据我的假设，修改如下：

HTML:


$（文档）.ready（函数（）{
$（'input[type=checkbox]'）。更改（函数（）{
如果（选中此项）{
$（this）.next（）.addClass（“yourClass”）//我假设您想将类添加到文本元素中
$（this）.next（）.css（“文本装饰线”，“线通过”）；//我假设您希望在单击复选框时删除文本
}否则{
$（this.next（）.removeClass（“yourClass”）
$（this.next（）.css（“文本装饰线”，“无”）；
}
});
});
.yourclass{
颜色：红色；
}

任务列表和作业
设定截止日期和作业
删除重复的任务和故事
更新用户流和故事
调整部件
因为您设置了所有
。标签文本
。您应该设置一个作为下一个输入


$（文档）.ready（函数（）{
$（'input[type=checkbox]'）。更改（函数（）{
如果（选中此项）{
$（this）.next（“.label text”）.css（“文本装饰线”、“线通过”）；
}否则{
$（this）.next（“.label text”）.css（“文本装饰线”，“无”）；
}
});
});

任务列表和作业
设定截止日期和作业
删除重复的任务和故事
更新用户流和故事
调整部件
您可以使用它来获取下一个元素，问题是您正在执行一个select on类，该类在所有元素上应用CSS，下面是您可以执行的方法：


$（文档）.ready（函数（）{
$（'input[type=checkbox]'）。更改（函数（）{
$（this.next（）.css（“文本装饰行”，this.checked？“行到”：“无”）；
});
});

任务列表和作业
设定截止日期和作业
删除重复的任务和故事
更新用户流和故事
调整部件
现在
$（“.label text”）
将选择与该类匹配的每个元素。因此，当
this.checked
为真时，所有复选框都将更新

相反，请尝试与一起使用


$（文档）.ready（函数（）{
$（'input[type=checkbox]'）。更改（函数（）{
如果（选中此项）{
$（this.parent（）.find（“.label text”）.css（“文本装饰线”、“线穿过”）；
}否则{
$（this.parent（）.find（“.label text”）.css（“文本装饰线”，“无”）；
}
});
});

任务列表和作业
设定截止日期和作业
删除重复的任务和故事
更新用户流和故事
调整部件
HTML：

<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> Set due date and assignments</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span> Remove duplicate tasks and stories</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span> Update the userflow and stories</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span> Adjust the components</span></label></div>
</div>

您必须在每个文本或句子中添加
标记以应用类或css。
对实现有一些反馈：

使用css类组织样式更容易管理。在本例中，我创建了选中的
option-label\uuu
来保存
文本装饰线
样式
我们可以利用调用事件委托的技术，使单个事件句柄服务于多个UI控制。因为您使用jQuery，所以技术是
恳求的。我将句柄连接到
.p-3
，并侦听来自
input
元素的
change
事件。当动态添加控件时，它变得很方便。这也有助于提高性能
您的示例不起作用的原因是您一次将
行通过
应用于所有
。标签文本
第二个参数允许您使用布尔值来打开或关闭类，这与复选框状态非常匹配。这句话只有一行

$（文档）.ready（函数（）{
$（'.p-3'）。在（'change'，'input[type=checkbox]'，function（）上{
$（this.parent（）.toggleClass（'option-label\uuu checked'，this.checked'）；
});
});
。选项标签已选中{
文字装饰线条：线条贯穿；
}

任务列表和作业
设定截止日期和作业
删除重复的任务和故事
更新用户流和故事
调整部件
请添加更多详细信息，如当前行为是什么？预期的行为是什么？更新请检查我已为此添加了解决方案。希望有帮助！但不清楚您到底想在哪里添加类
$(document).ready(function() {
   $('input[type=checkbox]').change(function() {
        $this = $(this);
        if (this.checked) {
          $this.next('span').css('text-decoration-line','line-through');
        } else {
          console.log('un-clicked');
          $this.next('span').css("text-decoration-line", "none");
        }
   });
});