亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

取消選中具有匹配ID的復選框

取消選中具有匹配ID的復選框

滄海一幻覺 2021-04-08 14:10:18
我遇到了一個問題,希望有人可以提供幫助,我嘗試了一些不同的想法,但仍未解決。我已經使腳本使每個復選框的單擊都出現了一個復選框項目的列表,但是我要做的是單擊打開的列表項上的“ 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;}
查看完整描述

3 回答

?
慕俠2389804

TA貢獻1719條經驗 獲得超6個贊

您不能直接將事件綁定到偽元素,因此到達此處的路線將是具有單擊事件以偵聽父元素(如@Roy的答案所示),但這將在整個范圍內具有事件偵聽器。

您的其他解決方案是在.checked-items中包含一個子元素,該子元素保存您的'X',而不是使用偽元素(:after)。這樣,您將能夠直接綁定到元素。


查看完整回答
反對 回復 2021-04-15
  • 3 回答
  • 0 關注
  • 227 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號