Question

问题： 我有动态创建的复选框组。如果选中至少一个复选框，则该组的标题会显示在页面顶部的单独kubectl get nodes中，并带有十字图标div。我想要做的是点击每个添加的标题的交叉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;
}

感谢您的支持！

Answer 1

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

Answer 2

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

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

2 个答案: