1)我选择了正确的复选框
2)按下"申请"按钮
3)重新加载页面
4)保留活动复选框,但名称是"标签"没有在单独的块中呈现
5)如果我点击任何复选框,则所有复选框都处于活动状态
将复选框呈现给所有活动标签并在#unit处呈现它们。我明白了,
var checkboxes = $('input[type=checkbox]:checked');
但显示无法
请帮忙,谢谢
$(document).ready(function() {
checkbox = $('.ctf--b-filt-check-list :checkbox').on('change', function() {
$('#unit').empty();
var count = 0;
$('.ctf--b-filt-c-item').map(function(i, el) {
let unit = $(this).find('input:checked').map(function(i, el) {
return ('<div class="ctf-b-btn-filter-items">' + $('[for="' + el.id + '"]').text() + '</div>');
}).get();
if (unit.length > 0) {
count += unit.length;
$('#unit').append('<div class="father father_tmp">' + $(this).find('.b-txt').text() + '</div>');
$('#unit').find('.father_tmp').append(unit.join(''));
$('.father_tmp').removeClass('father_tmp');
}
});
});
});
&#13;
.father {
width: 500px;
height: 100%;
font-size: 12px;
display: inline-block;
vertical-align: top;
margin-bottom: 10px;
}
.ctf-b-btn-filter-items {
padding: 2px;
width: 100;
height: 100%;
border: none;
cursor: pointer;
font-size: 13px;
color: #ffffff;
border-radius: 2px;
background: #35aaed;
background: linear-gradient(to bottom, #35aaed 0%, #0b80c4 100%);
text-align: center;
display: inline-block;
vertical-align: top;
margin: 0 5px 0 0;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ctf--b-filt-c-item open ctf--b-filt-c-item--active">
<div class="ctf--b-filt-c-head"><span class="b-txt">Единица измерения:</span></div>
<div class="ctf--b-filt-c-body" style="display: block;">
<div class="ctf--b-wpr-scr">
<ul class="ctf--b-filt-check-list ctf--b-filt-check-list--double">
<li>
<input type="checkbox" id="idchkk_2_0_0" value="11770">
<label for="idchkk_2_0_0" data="text">
<i></i>
Килограмм
</label>
</li>
<li>
<input type="checkbox" id="idchkk_2_0_1" value="11771">
<label for="idchkk_2_0_1" data="text">
<i></i>
Тонна
</label>
</li>
</ul>
<ul class="ctf--b-filt-check-list ctf--b-filt-check-list--double">
</ul>
</div>
</div>
</div>
<div class="ctf--b-filt-c-item open ctf--b-filt-c-item--active">
<div class="ctf--b-filt-c-head"><span class="b-txt">Полярность:</span></div>
<div class="ctf--b-filt-c-body" style="display: block;">
<div class="ctf--b-wpr-scr">
<ul class="ctf--b-filt-check-list ">
<li>
<input type="checkbox" id="idchkk_2_2_0" value="11773">
<label for="idchkk_2_2_0" data="polarity">
<i></i>
Обратная
</label>
</li>
<li>
<input type="checkbox" id="idchkk_2_2_1" value="11776">
<label for="idchkk_2_2_1" data="polarity">
<i></i>
Прямая
</label>
</li>
</ul>
</div>
</div>
</div>
<div id="count"></div>
<div id="unit"></div>
&#13;