Question

伙计我有2个复选框。当我点击其中一个时，必须标记其下的段落，但是当我选中第一个复选框时，它也会标记其他段落。想要用事件目标解决但无法解决它。用jquery做最简单的方法是什么？ JSFIDDLE HERE

function example ( event ) {
  var target = $( event.target );
  if ( target.is( "#checkbox" ) || target.is(":checked")) {
    $("p").addClass("checked");
  }else {
     $("p").removeClass("checked");
  }
}
  $("#checkbox").change(example);

.item {
  border:2px solid #333;
  display:inline-block;
  padding:10px 20px;
  text-align:center;
}
p.checked {
  text-decoration: line-through;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <input type="checkbox" id="checkbox">
  <p>Lorem ipsum dolor sit amet.</p>
</div>

<div class="item">
  <input type="checkbox" id="checkbox">
  <p>Ut wisi enim ad minim veniam.</p>
</div>

Answer 1

根据您的需要，您只需使用jQuery next函数。

target.next('p').addClass("checked");

我修复了你的小提琴，还有其他一些错误，例如，id属性应该是唯一的，你不能使用id =＆＃39; checkbox＆＃39;在两个不同的元素上。

fiddle

＆＃13;

function example(event) {
  var target = $(event.target);
  if (target.is(":checked")) {
    target.next('p').addClass("checked");
  } else {
    target.next('p').removeClass("checked");
  }
}
$("input[type='checkbox']").change(example);

＆＃13;

.item {
  border: 2px solid #333;
  display: inline-block;
  padding: 10px 20px;
  text-align: center;
}
p.checked {
  text-decoration: line-through;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <input type="checkbox">
  <p>Lorem ipsum dolor sit amet.</p>
</div>

<div class="item">
  <input type="checkbox">
  <p>Ut wisi enim ad minim veniam.</p>
</div>

＆＃13;

Answer 2

$（＆＃34; P＆＃34;）将获得DOM的第一段，试试这个：

function example ( event ) {
  var target = $( event.target );
  if ( target.is( "#checkbox" ) || target.is(":checked")) {
    target.next("p").addClass("checked");
  }else {
     target.next("p").removeClass("checked");
  }
}
  $("#checkbox").change(example);

选中复选框并使用jquery标记自己的段落

2 个答案: