在div中提交显示复选框值之后 [英] After submit display checkbox values in div
本文介绍了在div中提交显示复选框值之后的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在提交"或应用"按钮后显示复选框的值.谁能帮我这个忙.我希望在提交按钮后显示值.单击特定列应用按钮后，将显示特定列值.所有值都应在单个div中.此功能用于过滤器.
I am tried to display the checkbox values after submit or apply button. Can anybody help me with this. I want values to be displayed after submit button. particular column values display after particular column apply button is clicked. all the values should be in single div. This functionality is for filter.
(此操作将在后端完成).应用按钮后，第二列的值将根据第一列的选中值进行更改.等等.
(This will be done in back-end) after apply button the values on second column will change according to the checked values of first column. and so on.
$(':checkbox').on('change', function() {
var $this = $(this);
if (this.checked) {
$('#results')
.append('<li class="">' + $this.val() + ' <a href="#" class="item" data-cb="' + $this.data('ref') + '"><img src="https://www.kindpng.com/picc/m/504-5042965_close-wrong-cross-black-png-transparent-png.png"></a> </li>');
} else {
removeCheckedResult($('.item[data-cb=' + $this.data('ref') + ']'));
}
});
$(document).on('click', '.item', function() {
removeCheckedResult($(this));
});
function removeCheckedResult($child) {
$child.parent().remove();
$('input[class=mainlist][data-ref=' + $child.data('cb') + ']').prop('checked', false).trigger('change');
}
.container .hidden-menu{
padding: 0;
list-style: none;
}
.container .hidden-menu li{
padding:10px 15px;
}
.container .hidden-menu li img{
width:10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<section>
<div class="container">
<div class="row">
<div class="col-md-3">
<label><input type="checkbox" class="mainlist" value="test2" data-ref="2">test2<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test3" data-ref="3">test3<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test4" data-ref="4">test4<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test5" data-ref="5">test5<span class="checkmark"></span></label>
<button>Apply</button>
</div>
<div class="col-md-3">
<label><input type="checkbox" class="mainlist" value="test6" data-ref="6">test6<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test7" data-ref="7">test7<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test8" data-ref="8">test8<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test9" data-ref="9">test9<span class="checkmark"></span></label>
<button>Apply</button>
</div>
<div class="col-md-3">
<label><input type="checkbox" class="mainlist" value="test10" data-ref="10">test10<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test11" data-ref="11">test11<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test12" data-ref="12">test12<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test13" data-ref="13">test13<span class="checkmark"></span></label>
<button>Apply</button>
</div>
<div class="col-md-3">
<label><input type="checkbox" class="mainlist" value="test14" data-ref="10">test10<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test15" data-ref="11">test11<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test12" data-ref="12">test12<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test6" data-ref="13">test13<span class="checkmark"></span></label>
<button>Apply</button>
</div>
</div>
</div>
<div class="container">
<ul class="row hidden-menu clearfix" id="results">
</ul>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
推荐答案
我希望它会有所帮助:
$(function() {
$(':checkbox').on('change', function() {
/*var $this = $(this);
if (this.checked) {
$('#results')
.append('<li class="">' + $this.val() + ' <a href="#" class="item" data-cb="' + $this.data('ref') + '"><img src="https://www.kindpng.com/picc/m/504-5042965_close-wrong-cross-black-png-transparent-png.png"></a> </li>');
} else {
removeCheckedResult($('.item[data-cb=' + $this.data('ref') + ']'));
}*/
});
$(document).on('click', '.item', function() {
removeCheckedResult($(this));
});
function removeCheckedResult($child) {
$child.parent().remove();
$('input[class=mainlist][data-ref=' + $child.data('cb') + ']').prop('checked', false).trigger('change');
}
$("button").on("click", function(e){
var arr =[];
var arr1 =[];
$("#results").html('');
e.preventDefault();
var count = document.querySelectorAll("input:checked")
for (i = 0; i < count.length; i++) {
arr.push(count[i].value);
arr1.push(count[i].getAttribute("data-ref"));
}
for (j = 0; j < arr.length; j++) {
$("#results").append(`<li>`+arr[j]+`<a href="#" class="item" data-cb="` + arr1[j] + `"><img src="https://www.kindpng.com/picc/m/504-5042965_close-wrong-cross-black-png-transparent-png.png"></a></li>`)
}
/*$(this).next("span").text(arr);*/
})
})
.container .hidden-menu{
padding: 0;
list-style: none;
}
.container .hidden-menu li{
padding:10px 15px;
}
.container .hidden-menu li img{
width:10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<section>
<div class="container">
<div class="row">
<div class="col-md-3">
<label><input type="checkbox" class="mainlist" value="test22" data-ref="2">test2<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test33" data-ref="3">test3<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test44" data-ref="4">test4<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test55" data-ref="5">test5<span class="checkmark"></span></label>
<button>Apply</button><span></span>
</div>
<div class="col-md-3">
<label><input type="checkbox" class="mainlist" value="test6" data-ref="6">test6<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test7" data-ref="7">test7<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test8" data-ref="8">test8<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test9" data-ref="9">test9<span class="checkmark"></span></label>
<button>Apply</button><span></span>
</div>
<div class="col-md-3">
<label><input type="checkbox" class="mainlist" value="test10" data-ref="10">test10<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test11" data-ref="11">test11<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test12" data-ref="12">test12<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test13" data-ref="13">test13<span class="checkmark"></span></label>
<button>Apply</button><span></span>
</div>
<div class="col-md-3">
<label><input type="checkbox" class="mainlist" value="test14" data-ref="10">test10<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test15" data-ref="11">test11<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test12" data-ref="12">test12<span class="checkmark"></span></label>
<label><input type="checkbox" class="mainlist" value="test6" data-ref="13">test13<span class="checkmark"></span></label>
<button>Apply</button><span></span>
</div>
</div>
</div>
<div class="container">
<ul class="row hidden-menu clearfix" id="results">
</ul>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
这篇关于在div中提交显示复选框值之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
