How to get text of label of checked with html tag?

Question

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);

Answer 1

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>

Answer 2

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>