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

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 >
   <input type="checkbox" id="detail_cate01" name="chk_datail_category" value="">
   <label for="detail_cate01" ><span>cate1</span><b ></b></label>
 </li>
 <li >
   <input type="checkbox" id="detail_cate02" name="chk_datail_category" value="">
   <label for="detail_cate02" ><span>cate2</span><b ></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);

CodePudding user response：

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 >
    <input type="checkbox" id="detail_cate01" name="chk_datail_category" value="">
    <label for="detail_cate01" ><span>cate1</span><b ></b></label>
  </li>
  <li >
    <input type="checkbox" id="detail_cate02" name="chk_datail_category" value="">
    <label for="detail_cate02" ><span>cate2</span><b ></b></label>
  </li>
</ul>

<div id="detail_cate_output"></div>

CodePudding user response：

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 >
   <input type="checkbox" id="detail_cate01" name="chk_datail_category" value="">
   <label for="detail_cate01" ><span>cate1</span><b ></b></label>
 </li>
 <li >
   <input type="checkbox" id="detail_cate02" name="chk_datail_category" value="">
   <label for="detail_cate02" ><span>cate2</span><b ></b></label>
 </li>
</ul>

<div id="detail_cate_output"></div>