установите флажок в поле ввода текста jquery

Question

Это javascript:

$('.chkbx').click(function(){
    var text = "";
    $('.chkbx:checked').each(function(){
        text += $(this).val()+',';
    });
    text = text.substring(0,text.length-1);

    $('#textbx').val(text);
});

Когда я выбираю числа в флажке, он не работает в текстовом поле ввода.

JSFiddle

Answer 1

Вы можете использовать событие .change вместо .click, как показано ниже,

    $('.chkbx').change(function() {
  // this will contain a reference to the checkbox   
    var text = "";
    $('.chkbx:checked').each(function() {
      text += $(this).val() + ',';
    });
    text = text.substring(0, text.length - 1);
     console.log(text)
    $('#textbx').val(text);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cat_list">
  <li>
    <input id="1" value="1" type="checkbox" class="chkbx" name="cat[]">
    <label for="1" class="selectit">1</label>
    <ul class="children">
      <li>
        <input id="11" value="11" type="checkbox" class="chkbx" name="cat[]">
        <label for="11" class="selectit">11</label>
        <ul class="children">
          <li>
            <input id="111" value="111" type="checkbox" class="chkbx" name="cat[]">
            <label for="111" class="selectit">111</label>
          </li>
          <li>
            <input id="112" value="112" type="checkbox" class="chkbx" name="cat[]">
            <label for="112" class="selectit">112</label>
          </li>
        </ul>
      </li>
      <li>
        <input id="12" value="12" type="checkbox" class="chkbx" name="cat[]">
        <label for="12" class="selectit">12</label>
      </li>
      <li>
        <input id="13" value="13" type="checkbox" class="chkbx" name="cat[]">
        <label for="13" class="selectit">13</label>
      </li>
      <li>
        <input id="14" value="14" type="checkbox" class="chkbx" name="cat[]">
        <label for="14" class="selectit">14</label>
      </li>
      <li>
        <input id="15" value="15" type="checkbox" class="chkbx" name="cat[]">
        <label for="15" class="selectit">15</label>
        <ul class="children">
          <li>
            <input id="151" value="151" type="checkbox" class="chkbx" name="cat[]">
            <label for="151" class="selectit">151</label>
          </li>
          <li>
            <input id="152" value="152" type="checkbox" class="chkbx" name="cat[]">
            <label for="152" class="selectit">152</label>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<br/><br/>
<input type='text' id='textbx' value='' />