【发布时间】：2020-01-10 05:11:37
【问题描述】：
到目前为止，我所做的是当用户单击标签时，该标签的复选框被选中，标签的值与关闭图标一起附加到另一个 div 中。当我们单击关闭图标或取消选中时，复选框将被取消选中。但是当我们有两个复选框的相同标签名称时，单击关闭图标或取消选中一个时，两个复选框都未选中，因为相同的标签都将处于活动状态。我希望你得到我正在尝试的说。这是代码sn-p让你更清楚。任何帮助将不胜感激。
var passed_value, data, input_value, checkbox_items;
$('.form-check-label').click(function(e) {
data = $(this).text().trim();
input_value = data.split(' ').join('_');
$(this).prev('input').attr({
'value': input_value,
'id': input_value
});
e.stopImmediatePropagation();
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
passed_value = $(`<div><span>` + data + `</span><i class="fas fa-times"></i></div>`).prop('title', data);
$('.result-text1').append(passed_value).css('cursor', 'default');
} else {
$('.result-text1 span:contains(' + data + ')').parent().remove();
}
})
var active_text;
$('body').on('click', '.result-text1 i', function(e) {
e.stopImmediatePropagation();
$(this).parent('div').remove();
var text_div = $(this).prev().text();
// console.log(text_div);
active_text = $('.form-check-label.active:contains(' + text_div + ')');
if ($(active_text)) {
$(active_text).removeClass('active').prev().prop('checked', false);
}
}).result-text1 div {
display: grid;
grid-template-columns: min-content min-content;
grid-column-gap: 5px;
}
.result-text1 div span {
color: #1e699b;
padding: 7px;
font-size: 12px;
border: 1px solid #1e699b;
border-radius: 7px;
// margin-right: 7px;
text-overflow: ellipsis;
width: 110px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-align: center;
}
i {
height: 17px;
width: 17px;
background: #eaeaea;
border-radius: 50%;
color: #2d84d7;
display: grid;
justify-content: center;
align-items: center;
font-size: 11px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/cd3112b74c.js" crossorigin="anonymous"></script>
<div class="card">
<article class="card-group-item">
<header class="card-header">
<h6 class="title">pickup time </h6>
</header>
<div class="filter-content">
<div class="card-body">
<form>
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
morning
</span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
afternoon
</span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
evening
</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
night
</span>
</label>
<!-- form-check.// -->
</form>
</div>
<!-- card-body.// -->
</div>
</article>
<!-- card-group-item.// -->
<article class="card-group-item">
<header class="card-header">
<h6 class="title">drop time </h6>
</header>
<div class="filter-content">
<div class="card-body">
<form>
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
morning
</span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
afternoon </span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
evening
</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
night
</span>
</label>
<!-- form-check.// -->
</form>
</div>
<!-- card-body.// -->
</div>
</article>
<!-- card-group-item.// -->
</div>
<!-- card.// -->
<div class="result-text1"></div>【问题讨论】：
-
每当用户点击标签时，是否有任何特定的理由来设置复选框的值和 ID？您可以在设计时设置复选框的 id 和值，这反过来又使您可以灵活地为“Pickup”和“Drop”选项设置不同的值和 id。一旦值和 id 不同，您就可以根据这些复选框值和 id 而不是标签文本来更改您的 javascript。
-
哦，所以您的意思是，当我们取消选中或单击关闭图标时，我应该检查与该标签关联的 ID，而不是检查标签，因为 ID 是唯一的？？
标签： javascript jquery css