取消選中與點擊按鈕相關的所有複選框。

Question

問題： 我有動態創建的複選框組。如果至少選中一個複選框，則該組的標題將顯示在單獨的div的頁面頂部，並帶有十字圖標x。我想要做的是點擊每個添加標題的交叉x它需要取消選中與該標題相關的所有複選框並刪除標題本身。

Codepen例如：https://codepen.io/gabe747/pen/jLaEvq

$(document).ready(function() { 
 
    check() 
 
}); 
 
$("input[type=checkbox]").change(function() { 
 
    check() 
 
}) 
 

 
function check() { 
 
    $(".col-filter_amount").text(""); 
 

 
    $(".col-filter_block").each(function() { 
 
    if ($(this).find("input[type=checkbox]:checked").length) 
 
     $(this).find(".cols-title").clone().append('<a class="checkbox-remover" href="javascript:;">x</a>').appendTo($(".col-filter_amount")) 
 
    }) 
 
} 
 

 
$(".checkbox-remover").on('click', function() { 
 
    // REMOVE TITLE AND UNCHECK RELATED TO THIS TITLE CHECKBOXES 
 
});

.col-filter_amount { 
 
    border: 1px solid #ccc; 
 
} 
 

 
.col-filter_amount h4 { 
 
    background: #000; 
 
    color: #fff; 
 
    display: inline-block; 
 
    padding: 5px; 
 
    margin: 15px; 
 
} 
 

 
.col-filter_amount h4 a { 
 
    color: fff; 
 
    text-decoration: none; 
 
    margin-left: 5px; 
 
    color: #000; 
 
    background: #fff; 
 
    border-radius: 50%; 
 
    padding: 1px 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-filter_amount"> 
 

 
</div> 
 

 
<div class="col-filter_block"> 
 
    <h4 class="cols-title" data-value="1">group1</h4> 
 
    <input type="checkbox" data-value="1">item1 
 
    <input type="checkbox" data-value="1">item2 
 
    <input type="checkbox" data-value="1">item3 
 
    <input type="checkbox" data-value="1">item4 
 
</div> 
 

 
<div class="col-filter_block"> 
 
    <h4 class="cols-title" data-value="2">group2</h4> 
 
    <input type="checkbox" data-value="2">item1 
 
    <input type="checkbox" data-value="2">item2 
 
    <input type="checkbox" data-value="2">item3 
 
    <input type="checkbox" data-value="2">item4 
 
</div>

感謝您的支持！

Answer 1

因爲它的動態添加的元素，您需要監聽某個已存在的父元素上的click事件，例如body。然後您可以使用data屬性來選擇具有相同值的輸入元素。

$(document).ready(function() { 
 
    check() 
 
}); 
 
$("input[type=checkbox]").change(function() { 
 
    check() 
 
}) 
 

 
function check() { 
 
    $(".col-filter_amount").text(""); 
 

 
    $(".col-filter_block").each(function() { 
 
    if ($(this).find("input[type=checkbox]:checked").length) 
 
     $(this).find(".cols-title").clone().append('<a class="checkbox-remover" href="javascript:;">x</a>').appendTo($(".col-filter_amount")) 
 
    }) 
 
} 
 

 
$('body').on('click', ".checkbox-remover", function() { 
 
    $('input[data-value="'+$(this).parent().data('value')+'"]').attr('checked', false) 
 
    $(this).parent().remove() 
 
});

.col-filter_amount { 
 
    border: 1px solid #ccc; 
 
} 
 

 
.col-filter_amount h4 { 
 
    background: #000; 
 
    color: #fff; 
 
    display: inline-block; 
 
    padding: 5px; 
 
    margin: 15px; 
 
} 
 

 
.col-filter_amount h4 a { 
 
    color: fff; 
 
    text-decoration: none; 
 
    margin-left: 5px; 
 
    color: #000; 
 
    background: #fff; 
 
    border-radius: 50%; 
 
    padding: 1px 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-filter_amount"> 
 

 
</div> 
 

 
<div class="col-filter_block"> 
 
    <h4 class="cols-title" data-value="1">group1</h4> 
 
    <input type="checkbox" data-value="1">item1 
 
    <input type="checkbox" data-value="1">item2 
 
    <input type="checkbox" data-value="1">item3 
 
    <input type="checkbox" data-value="1">item4 
 
</div> 
 

 
<div class="col-filter_block"> 
 
    <h4 class="cols-title" data-value="2">group2</h4> 
 
    <input type="checkbox" data-value="2">item1 
 
    <input type="checkbox" data-value="2">item2 
 
    <input type="checkbox" data-value="2">item3 
 
    <input type="checkbox" data-value="2">item4 
 
</div>

Answer 2

$(document).on('click', '.checkbox-remover', function(){ 
    var button = $(this).closest("h4"); 
    $("input[type=checkbox][data-value="+button.data("value")+"]").prop("checked",false); 
    button.remove(); 
}); 

添加到您的codepen：https://codepen.io/anon/pen/zdPGOR