如何编辑 check/uncheck 的输入

Question

如果用户单击以首先跨越文本，则应标记复选框#First 等。
如果用户再次单击此范围，则应取消选中此复选框
如果选中输入第二个，第二个文本跨度必须 class 处于活动状态

我该怎么做？

$("span").on("click", function() {
    $("input").prop( "checked", true );
});

CODEPEN

Answer 1

Select input 使用索引

$("span").on("click", function() {
    $("input").eq($(this).index()).prop( "checked", true );
});

注意： 为了防止选择所有跨度设置一些 class 并将其用作选择器。

Answer 2

您在 codepen 中所做的一切都在正确的轨道上。

但是，您需要两种方式都做同样的事情。即在点击跨度时，更改复选框状态；并且在复选框更改时，切换跨度 class。

此外，请记住在使用 .eq($(this).index().. 时不要忘记传递选择器。否则，它将获得该元素相对于兄弟元素的索引。

演示 Fiddle：http://jsfiddle.net/abhitalks/r8w38jr5/2/

片段：

$("span.lbl").on("click", function() {
    var inp = $("input[type=checkbox]").eq($(this).index('.lbl')), 
        chk = inp.prop('checked');
    inp.prop("checked", !chk);
    $(this).toggleClass('active');
});
$("input[type=checkbox]").on("change", function() {
    var spn = $("span.lbl").eq($(this).index('[type=checkbox]')); 
    spn.toggleClass('active');
});

span {
    padding: 5px 10px; display: inline-block;
    border: 1px solid black; border-radius: 5px;
    cursor: pointer;
}
div  { margin-top: 50px; }
.active { background: black; color: white; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="lbl">First</span><span class="lbl">Second</span><span class="lbl">Third</span>
<div>
  <input type="checkbox" id="First" /><label for="First">First</label>
  <input type="checkbox" id="Second" /><label for="Second">Second</label>
  <input type="checkbox" id="Third" /><label for="Third">Third</label>
</div>

如何编辑 check/uncheck 的输入

How to edit check/uncheck of input

jquery

edit

elements