取消选中具有匹配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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="test-list ul-reset">

    <li class="m-label-inline">
        <input class="js-refinement-link input-checkbox" type="checkbox" name="Product1" id="Product1"/><label for="Product1">Product 1</label>

    <li class="m-label-inline">
        <input class="js-refinement-link input-checkbox" type="checkbox" name="Product2" id="Product2"/><label for="Product2">Product 2</label>

    <li class="m-label-inline">
        <input class="js-refinement-link input-checkbox" type="checkbox" name="Product3" id="Product3"/><label for="Product3">Product 3</label>
    </li>

    <li class="m-label-inline">
        <input class="js-refinement-link input-checkbox" type="checkbox" name="Product4"  id="Product4"><label for="Product4">Product 4</label>
    </li>

    <ul class="selectedProducts ul-reset"></ul>

</ul>

Answer 1

检查以下内容： https://codepen.io/anon/pen/ROPZvE

我添加：

  //On click in each .checked-items span
  $(document).on('click','.checked-items span',function(){
      //Remove the clicked element
      $(this).parent().remove();
      //Get the html referenced to the checkbox#id
      var checkId = $(this).html();
      //Unchecked the checbox
      $('#'+checkId).prop('checked',false)
  })

是的，:after应该由DOM元素更改。明确说明：

$(document).on('click','.checked-items span .theXElement',function(){

Answer 2

您不能直接将事件绑定到伪元素，因此到达此处的路线将是具有在父元素上监听的click事件（如@Roy的答案所示），但这将在整个范围内具有事件监听器。

您的其他解决方案是在.checked-items中包含一个子元素，该子元素保存您的'X'而不是使用伪元素（：after）。这样，您将可以直接绑定到元素。

Answer 3

这里的问题是您无法访问使用::after CSS选择器创建的元素，因为它实际上并不是DOM的一部分。

使代码正常工作的解决方案：将其替换为真实元素，例如将另一个<span>用类.after（或所需的类）替换，然后在这些标记上添加事件侦听器。 / p>

//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) {
                    // Added a <span.after> here
                    return ('<li class="checked-items ' +
                        checkbox.id +
                        '" id="' +
                        checkbox.id +
                        '"><span>' +
                        checkbox.id +
                        '<span class="after">X</span></span></li>'
                    );
                })
                .get()
                .join("") 
        );
    });
    
    // Dynamic event listener.
    $(document).on('click', '.checked-items .after', function() {
      const chkId = `#${$(this).parents('.checked-items').first().attr('id')}`;
      
      $(chkId).prop('checked', false);
      $(this).parents('.checked-items').first().remove();
    });
});

.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:first-of-type {
    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;
}

// Not using ::after, but .after class instead
.checked-items > span:first-of-type .after {
   color: red;
    width: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="test-list ul-reset">

    <li class="m-label-inline">
        <input class="js-refinement-link input-checkbox" type="checkbox" name="Product1" id="Product1"/><label for="Product1">Product 1</label>

    <li class="m-label-inline">
        <input class="js-refinement-link input-checkbox" type="checkbox" name="Product2" id="Product2"/><label for="Product2">Product 2</label>

    <li class="m-label-inline">
        <input class="js-refinement-link input-checkbox" type="checkbox" name="Product3" id="Product3"/><label for="Product3">Product 3</label>
    </li>

    <li class="m-label-inline">
        <input class="js-refinement-link input-checkbox" type="checkbox" name="Product4"  id="Product4"><label for="Product4">Product 4</label>
    </li>

    <ul class="selectedProducts ul-reset"></ul>

</ul>