Question

我有一个p元素内的复选框列表

<div id="wrapper">
    <p><input name="product" type="checkbox"> Unchecked </p>
    <p><input name="product" type="checkbox"> Unchecked </p>
    <p><input name="product" type="checkbox"> Unchecked </p>
    <p><input name="product" type="checkbox"> Unchecked </p>
    <p><input name="product" type="checkbox"> Unchecked </p>

    <input type="submit" value="submit" id="submit">
</div>

但是，如果我检查第3个复选框，例如它会影响第1个和第2个

$('#submit').on('click', function() {
    $('#wrapper p').each(function() {
        if ($('input[type=checkbox]').is(':checked')){
            $(this).text($(this).text().replace("Unchecked", "Checked"));
        }
    });
});

我认为这是因为一旦找到一个已经检查过的标记，它会经历所有先前的复选标记，但我不知道如何解决这个问题。

小提琴：http://jsfiddle.net/pt9w8ksf/1/

Answer 1

输入标记是段落的后代，因此您必须遍历DOM树。您必须使用this，然后找到最近的复选框。

$('#submit').on('click', function() {
    $('#wrapper p').each(function() {
        if ($(this).find('input[type=checkbox]').is(':checked')){
            $(this).text($(this).text().replace("Unchecked", "Checked"));
        }
    });
});

http://jsfiddle.net/pt9w8ksf/3/

Answer 2

你非常接近：

http://jsfiddle.net/23xwhh3b/

您只需将, this添加到以下语句中，如下所示：

if ($('input[type=checkbox], this).is(':checked')){

jQuery选择器可以使用第二个参数来指定第一个参数（选择器）应该被约束的上下文。

在这种情况下，我们希望input[type=checkbox]选择器约束到当前上下文（即p函数中当前处理的each()。

我们可以使用this来引用当前的函数上下文。

$('#submit').on('click', function() {
  $('#wrapper p').each(function() {
    if ($('input[type=checkbox]',this).is(':checked')){
        $(this).text($(this).text().replace("Unchecked", "Checked"));
    }
  });
});

迭代每个选中的输入会影响未经检查的输入

2 个答案: