取消选中具有匹配ID的复选框

Question

我遇到了一个问题，希望有人可以提供帮助，我尝试了一些不同的想法，但仍未解决。

我已经使脚本使每个复选框的单击都出现了一个复选框项目的列表，但是我要做的是单击打开的列表项上的“ X”以取消选中匹配的输入。

我在这里有一个工作正常的CodePen，向您展示我的意思：

https://codepen.io/nickelse/pen/dLoOVE

感谢您的帮助，如果我需要进一步解释，请告诉我:)

我尝试了一些不同的想法，但是无法正确地将其匹配到相应的输入的逻辑。

//demo example

$(function() {

    var $allProducts = $(".js-refinement-link.input-checkbox");

    var $selectedProductsListing = $(".selectedProducts");

    $allProducts.on("click", function(e) {

        $selectedProductsListing.html(

            $allProducts

                .filter(":checked")

                .map(function(index, checkbox) {

                    return (

                        '<li class="checked-items ' +

                        checkbox.id +

                        '" id="' +

                        checkbox.id +

                        '"><span>' +

                        checkbox.id +

                        "</span></li>"

                    );

                })

                .get()

                .join("") 

        );

    });

});

.ul-reset {

    list-style: none;

    margin: 0;

    padding: 0;

}

.selectedProducts {

    display: flex;

    margin-left: -20px;

    margin-top: 40px;

}

.checked-items { 

    padding-left: 20px;

}

.checked-items span {

    align-items: center;

    background: white;

    border: 3px solid tomato;

    border-radius: 6px;

    color: #333;

    display: flex;

    height: 36px;

    line-height: 1;

    padding-left: 10px;

    padding-right: 10px;

}

.checked-items span:after {

   color: red;

    width: 12px;

    content: 'X';

    display: flex;

    align-items: center;

    justify-content: center;

    margin-left: 10px;

}

Answer 1

您不能直接将事件绑定到伪元素，因此到达此处的路线将是具有单击事件以侦听父元素（如@Roy的答案所示），但这将在整个范围内具有事件侦听器。您的其他解决方案是在.checked-items中包含一个子元素，该子元素保存您的'X'，而不是使用伪元素（：after）。这样，您将能够直接绑定到元素。