取消选中与点击按钮相关的所有复选框。

问题： 我有动态创建的复选框组。如果至少选中一个复选框，则该组的标题将显示在单独的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>

感谢您的支持！

来源

2017-08-15 Gabriel Manukyan

为什么不使用一个单选按钮？或者我理解错误的问题？ –

对我来说，问题不在复选框或收音机，但如果你尝试检查一个，你会看到标题添加在顶部，我需要的是单击顶部标题它取消选中所有选中并隐藏自己 –

是的，对了！ –

因为它的动态添加的元素，您需要监听某个已存在的父元素上的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>

来源

2017-08-15 11:48:42

为什么添加元素时不能添加点击处理程序？ – freginold

这一个工程，只有一个问题，我们可以以某种方式触发点击这些未经检查的？ –

@ Gabriel Manukyan你的意思是这样的https://jsfiddle.net/Lg0wyt9u/2156/ –

$(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

来源

2017-08-15 11:52:39 StrongLucky

简短而甜美。 +1 – freginold

@strongLucky我们可以在取消选中时触发点击吗？ –

当然。在哪个元素上？添加.trigger（“click”）; – StrongLucky

取消选中与点击按钮相关的所有复选框。

回答

相关问题