¿Cómo obtengo cada texto de la etiqueta de entrada: verificado con <span> ? Traté de usar "<span>" + $(this).next().find('span').text() + "</span>"; No estaba funcionando.
<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);Su código básicamente funciona, excepto que necesitaba agregar un evento de cambio.
$("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); });Manifestación
$("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>Solo necesita onchange Event.
Primero debe capturar los cambios marcados/desmarcados de la casilla de verificación. y luego puedes recorrerlo.
$("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>