Jquery 如果span包含ID，则

尝试使用

$（this.attr（“id”）

生成if语句时遇到困难。我想要的是，当一个复选框被点击并选中时，它的ID被记录在一个div

#log

（这是有效的）。当它被单击而未被选中时，jQuery应该检查记录的行是否与复选框的ID相同。如果是这样，则应移除该跨度

下面是一个JSFIDLE：

因此，当您单击

Option 1

时，将显示文本

Option-0

（这是复选框的ID）。再次单击按钮时，该文本应消失

以下是脚本：

$(document).ready(function() {
    $(".menu").find("input:checkbox").click(function() {

        if ($(this).is(":checked")) {
            $("#textValue").text($(this).val());
            $("#log").append("<span>" + this.id + "</span><br/>");
        }
        else {
            if ($("#log").children("span").contains($(this).attr("id"))) {
                console.log($(this).attr("id"));
                $("#log").children("span").remove();
            }
        }
    });
});​

$（文档）.ready（函数（）{
$（“.menu”）。查找（“输入：复选框”）。单击（函数（）{
如果（$（this）.is（“：checked”））{
$（“#textValue”）.text（$（this.val（））；
$（“#log”）.append（“+this.id+”
）；
}
否则{
if（$（“#log”）.children（“span”）包含（$（this.attr（“id”））{
log（$（this.attr（“id”））；
$（“#log”）.children（“span”）.remove（）；
}
}
});
});​

我很确定问题在于“包含”。但是我不知道如何让jQuery检查是否存在包含第一个函数中选中的复选框ID的范围

谢谢。

而不是

$（“#log”）。子项（“span”）包含（$（this.attr（“id”））

使用

$（“#log span:contains（“'+this.id+”）”）

$（文档）.ready（函数（）{ $（“.menu”）。查找（“输入：复选框”）。单击（函数（）{

if（$（this）.is（“：checked”））{
$（“#textValue”）.text（$（this.val（））；
$（“#log”）.append（“+this.id+”
）；
}
否则{
$（'#log span:contains（“+this.id+”））.next（'br'）.andSelf（）.remove（）；
}
});

}))

---

只要检查一下就可以了。我认为您必须只删除未选中复选框的范围

$（文档）.ready（函数（）{
$（“.menu”）。查找（“输入：复选框”）。单击（函数（）{
如果（$（this）.is（“：checked”））{
$（“#textValue”）.text（$（this.val（））；
$（“#log”）.append（“+this.id+”
）；
}
否则{
if（$（“#log”）.children（“span:contains”（+（$（this.attr）（“id”））+）））{
log（$（this.attr（“id”））；
$（“#log”）.children（“span:contains”（+（$（this.attr）（“id”））+”）.remove（）；
}
}
});
});

您可以采用HTML5数据属性，但由于它是一对一的，我只给span一个id

log-{checkbox id}

，因此基本上：

$(".menu input:checkbox").on("click", function() {
    if ($(this).is(":checked")) {
        $("#textValue").text($(this).val());
        $("#log").append("<span id=\"log-" + this.id + "\">" + this.id + "</span><br/>");
    }
    else {
        $("#log-" + $(this).attr("id")).remove();
    }
});​

$（“.菜单输入：复选框”）。在（“单击”，函数（）上）{
如果（$（this）.is（“：checked”））{
$（“#textValue”）.text（$（this.val（））；
$（“#log”）.append（“+this.id+”
）；
}
否则{
$（“#log-”+$（this.attr（“id”））.remove（）；
}
});​

这是小提琴：

这样做的好处是，您不必确认该值是否已经在列表中，因为使用选择器无法找到它。我可能会收紧插入和HTML的处理方式，但现在，我只想修改代码以显示id标记解决方案

在这里，有点紧了：

$(".menu input:checkbox").on("click", function() {
    if ($(this).is(":checked")) {
        $("#textValue").text($(this).val());
        var $log_entry = $('<li>');
        $log_entry.attr("id", "log-" + this.id);
        $log_entry.text(this.id);
        $("#log").append($log_entry);
    }
    else {
        $("#log-" + $(this).attr("id")).remove();
    }
});​

$（“.菜单输入：复选框”）。在（“单击”，函数（）上）{
如果（$（this）.is（“：checked”））{
$（“#textValue”）.text（$（this.val（））；
var$log_entry=$（“
”）；
$log_entry.attr（“id”，“log-”+this.id）；
$log_entry.text（this.id）；
$（“#log”）。追加（$log#u条目）；
}
否则{
$（“#log-”+$（this.attr（“id”））.remove（）；
}
});​

---

请注意，日志现在是一个

ul

，因此不需要中断等，从而更容易添加id属性和文本。新演示位于：

您的代码将删除

#log

下的所有跨距。我认为这不是询问者想要的。你的代码仍然不太正确。

if

将始终为true，因为jQuery对象将始终返回。将

if

全部去掉，只需删除即可。如果没有匹配的元素，就不会造成伤害。非常感谢。ul的发现也很好！只是想知道，你知道this.id和$（this.attr（“id”）之间有什么区别吗？非常感谢。我也在想，然后我突然想到了

this.id

是实际的DOM对象（具有属性

id

），而

$（this）

是jquery对象，它使用

attr（）

方法获取与选择器匹配的所有元素的属性，并且没有特定id的本机属性。

$(".menu input:checkbox").on("click", function() {
    if ($(this).is(":checked")) {
        $("#textValue").text($(this).val());
        $("#log").append("<span id=\"log-" + this.id + "\">" + this.id + "</span><br/>");
    }
    else {
        $("#log-" + $(this).attr("id")).remove();
    }
});​

$(".menu input:checkbox").on("click", function() {
    if ($(this).is(":checked")) {
        $("#textValue").text($(this).val());
        var $log_entry = $('<li>');
        $log_entry.attr("id", "log-" + this.id);
        $log_entry.text(this.id);
        $("#log").append($log_entry);
    }
    else {
        $("#log-" + $(this).attr("id")).remove();
    }
});​