How do I get each text of label of input:checked with <span>?
I tried to use "<span>" + $(this).next().find('span').text() + "</span>";
It was not working.
<ul>
<li class="check_cst">
<input type="checkbox" id="detail_cate01" name="chk_datail_category" value="">
<label for="detail_cate01" class="flex_btw items_cnt"><span>cate1</span><b class="flex_cnt items_cnt"></b></label>
</li>
<li class="check_cst">
<input type="checkbox" id="detail_cate02" name="chk_datail_category" value="">
<label for="detail_cate02" class="flex_btw items_cnt"><span>cate2</span><b class="flex_cnt items_cnt"></b></label>
</li>
</ul>var values = "";
$("input[type='checkbox'][name='chk_datail_category']:checked").each(function(){
values += $(this).next().find('span').text(); //I wanna get this with <span>
});
$("#detail_cate_output").html(values);You code is basically working except you needed a change event added.
$("input[type='checkbox'][name='chk_datail_category']").change(function() {
var values = "";
$("input[type='checkbox'][name='chk_datail_category']:checked").each(function() {
values += $(this).next().find('span').text(); //I wanna get this with <span>
});
$("#detail_cate_output").html(values);
});
Demo
$("input[type='checkbox'][name='chk_datail_category']").change(function() {
var values = "";
$("input[type='checkbox'][name='chk_datail_category']:checked").each(function() {
values += $(this).next().find('span').text(); //I wanna get this with <span>
});
$("#detail_cate_output").html(values);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="check_cst">
<input type="checkbox" id="detail_cate01" name="chk_datail_category" value="">
<label for="detail_cate01" class="flex_btw items_cnt"><span>cate1</span><b class="flex_cnt items_cnt"></b></label>
</li>
<li class="check_cst">
<input type="checkbox" id="detail_cate02" name="chk_datail_category" value="">
<label for="detail_cate02" class="flex_btw items_cnt"><span>cate2</span><b class="flex_cnt items_cnt"></b></label>
</li>
</ul>
<div id="detail_cate_output"></div>You just need onchange Event.
First you need to capture changes check/uncheck of checkbox. and then you can loop through it.
$("input[type='checkbox'][name='chk_datail_category']").change(function() {
var values = "";
$("input[type='checkbox'][name='chk_datail_category']:checked").each(function(){
values += $(this).next().find('span').text(); //I wanna get this with <span>
});
$("#detail_cate_output").html(values);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="check_cst">
<input type="checkbox" id="detail_cate01" name="chk_datail_category" value="">
<label for="detail_cate01" class="flex_btw items_cnt"><span>cate1</span><b class="flex_cnt items_cnt"></b></label>
</li>
<li class="check_cst">
<input type="checkbox" id="detail_cate02" name="chk_datail_category" value="">
<label for="detail_cate02" class="flex_btw items_cnt"><span>cate2</span><b class="flex_cnt items_cnt"></b></label>
</li>
</ul>
<div id="detail_cate_output"></div>