jQuery勾选框，勾选/取消勾选逻辑

我正在研究复选框的逻辑。如果取消选中复选框，则会隐藏已创建的列表项。这方面的一个例子是，我让勾号逻辑工作，但我希望“取消勾号”逻辑工作

我已经给每个li项指定了一个类，因此基本上希望将这两个项配对以删除列表项。只是运气不好

有谁能帮我扩展这个逻辑，以便我显示/隐藏未勾选的li项，否则我只剩下一个永无止境的项列表

谢谢

1）使用

change

事件收听复选框。如果使用

单击

，则忽略来自键盘交互的任何状态更改

2） 您当前的“if not checked”代码正在创建一个新的

li

，并将其删除（甚至在它进入DOM之前）-可能不是您的意思

我假设您打算删除当前的

li

s，这些li的类等于已更改复选框的

name

属性。请参阅更新的小提琴：

1）使用

change

事件侦听复选框。如果使用

单击

，则忽略来自键盘交互的任何状态更改

2） 您当前的“if not checked”代码正在创建一个新的

li

，并将其删除（甚至在它进入DOM之前）-可能不是您的意思

我假设您打算删除当前的

li

s，这些li的类等于已更改复选框的

name

属性。请参阅更新的小提琴：

---

您可以从复选框的名称属性中删除空格，请尝试以下操作：

<input type="checkbox" title="100.00" class="service_check" value="8" name="Test Service Name">

---

您可以从复选框的名称属性中删除空格，请尝试以下操作：

<input type="checkbox" title="100.00" class="service_check" value="8" name="Test Service Name">

---

我明白你的意思。每个li都有一个与tickboxs类配对的类。因此，如果该类被取消勾选，请删除与该取消勾选匹配的列表项。@Utkanos几乎在您的版本上，但是在取消勾选复选框时，它会删除所有LI，而不仅仅是它应该看到更新的FIDLE的LI-但是，它仍然会失败，因为您的复选框名称/

LI

类包含空格。这将破坏一切，因为HTML认为类属性中的空格表示几个不同的类。确保这些名称/空格不包含空格（例如下划线），并且所有名称/空格都应无误。看一看，我只是简单地用下划线替换空格，以确保它工作良好-任务完成了，那么，我明白你的意思了。每个li都有一个与tickboxs类配对的类。因此，如果该类被取消勾选，请删除与该取消勾选匹配的列表项。@Utkanos几乎在您的版本上，但是在取消勾选复选框时，它会删除所有LI，而不仅仅是它应该看到更新的FIDLE的LI-但是，它仍然会失败，因为您的复选框名称/

LI

类包含空格。这将破坏一切，因为HTML认为类属性中的空格表示几个不同的类。确保这些名称/空格不包含空格（例如下划线），并且所有名称/空格都应无误。看一看，我只是用下划线替换空格，以确保它工作良好——那么，任务完成了。

    else if ($(this).not(":checked")) { // you can replace this line with "else {"
        var cls = $(this).attr('name') 
        $("li."+cls).remove();
        $(".hidden_service_id, .hidden_service_name, .hidden_service_cost").val("");
    }