JQuery：在输入复选框类型中选择 <p>答案

【问题标题】：JQuery: select <p> inside an input checkbox typeJQuery：在输入复选框类型中选择 <p>
【发布时间】：2015-08-11 17:54:19
【问题描述】：

我想更改我的<p> 标签样式。

我的html代码：

<input type="checkbox"><p> paragraph</p>

jQuery:

$('ul.list').on("click", "input", function() {
    if ( $(this).is(':checked') ) {
        $(this).find('p').css("text-decoration", "line-through");
    } else {
        $(this).find('p').css("text-decoration", "none");
    }
});

【问题讨论】：

标签： jquery checkbox input selector

【解决方案1】：

<input> 元素是一个 void 元素 (see this answer)，因此不应包含任何元素。您可以改用.next() 或.siblings() 来获得您想要的效果。

$('ul.list').on("click", "input", function(){
  if( $(this).is(':checked') ) {
    $(this).next('p').css("text-decoration" ,  "line-through");
  } else {
    $(this).siblings('p').css("text-decoration", "none");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li>
    <input type="checkbox"><p> paragraph</p>
  </li>
</ul>

【讨论】：

【解决方案2】：

您可以针对该行为使用纯 CSS 解决方案：

input[type=checkbox]:checked + p {
  text-decoration: line-through;
}

<ul class="list">
  <li>
    <input type="checkbox">
    <p>paragraph</p>
  </li>
</ul>

【讨论】：

这很好，但我通过单击按钮功能附加复选框，这不起作用。别担心，我刚刚找到了解决方案。 :D 谢谢！
@ĐứcHợpTrần 处理任何动态元素，所以你做错了什么

【解决方案3】：

您的段落不在input 标签内。尝试使用next 而不是find：

$('ul.list').on("click", "input", function(){

    if( $(this).is(':checked') ) {
        $(this).next('p').css("text-decoration" ,  "line-through");
    } else {
        $(this).next('p').css("text-decoration", "none");
    }
});

https://api.jquery.com/next/

【讨论】：

非常感谢，这和 ErikLundgren 的方法都有效：D

【解决方案4】：

使用next()函数。

 $('ul.list').on("click", "input:checkbox", function () {
    $(this)
        .next('p')
        .css("text-decoration", this.checked ? "line-through" : "none");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="list">
  <li>
    <input type="checkbox">
    <p>paragraph</p>
  </li>
</ul>

或者你可以使用siblings()函数

$('ul.list').on("click", "input", function() {
    $(this).siblings('p')
        .css("text-decoration", this.checked ? "line-through" : "none")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="list">
  <li>
    <input type="checkbox">
    <p>paragraph</p>
  </li>
</ul>

【讨论】：

谢谢，但它不起作用：我找到了解决方案
@ĐứcHợpTrần 我不知道那里发生了什么，但这工作得很好。我添加了代码片段，检查一下。