Jquery: Как сохранить флажок флажок / снять состояние в скрытом поле

Question

У меня есть HTML-таблица, у меня есть много флажков.когда пользователь нажимает на флажок заголовка, тогда все дочерние флажки будут отмечены и сняты с проверки в зависимости от состояния флажка заголовка.

пользователь также может снять и установить любой дочерний флажок.я хочу сохранить значение дочернего флажка в скрытом поле, разделенном запятой.если выбран дочерний флажок, то значение флажка будет сохранено в поле hiiden, но если это значение флажка находится в поле hiiden, то оно не будет сохранено в скрытом поле.

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

Я пробовал этот способ, но не удалось.так веди меня, как этого добиться.мой код выглядит следующим образом

<table id="tbl" border="10">
<thead>
<tr>
<td><input type="checkbox" id = "chckHead" /></td>
<td>First Row</td>
<td>Second Row</td>
<td>Third Row</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class = "chcktbl" value="101"/>
</td>
<td>1</td>
<td>1</td>
<td>1</td>
 </tr>
<tr>
<td>
<input type="checkbox" class = "chcktbl"  value="102"/>
</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>
<input type="checkbox" class = "chcktbl"  value="103"/>
</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
<input id="hidden" type="hidden" name="hidden">

$(document).ready(function(){
  $('#chckHead').click(function () {
    $(".chcktbl").prop('checked', $(this).prop("checked"));
  });  

  $(".chcktbl").change(function() {
  var values = [];
  $('.chcktbl').each(function (index, obj) {
  alert('pop');
    if (this.checked === true) {
      values.push($(this).val());
    }
  });
  });
  alert(values.toString());

});

Answer 1

Вы сможете получить все отмеченные флажки с помощью этого селектора:

$('input[type=checkbox]:checked')

Затем вы можете вызвать карту, чтобы получить все идентификаторы и присоединиться к ним

string = $('input[type=checkbox]:checked').map(function(idx,element) {
    return element.value;
}).join(',')

Тогда просто слушайтесобытие onChange для всех флажков и установите значение для скрытого поля.

Answer 2

Вы забыли присвоить значения флажков скрытому input, а также вы должны сделать это в приемнике событий флажка заголовка.

$(document).ready(function() {
  var hidden = $('#hidden');
  $('#chckHead').click(function() {
    var state = $(this).prop('checked');
    if(state === false) {
      hidden.val('');
    }
    var vals = [];
    $('.chcktbl').each(function() {
      $(this).prop('checked', state);
      if(this.checked === true) {
        vals.push($(this).val());
      }
    });
    hidden.val(vals.toString());
  });
  $(".chcktbl").change(function() {
    var values = [];
    $('.chcktbl').each(function(index, obj) {
      if(this.checked === true) {
        values.push($(this).val());
      }
    });
    hidden.val(values.toString());
  });
});

<table id="tbl" border="10">
  <thead>
    <tr>
      <td><input type="checkbox" id="chckHead" /></td>
      <td>First Row</td>
      <td>Second Row</td>
      <td>Third Row</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" class="chcktbl" value="101" />
      </td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="chcktbl" value="102" />
      </td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="chcktbl" value="103" />
      </td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
    </tr>
  </tbody>
</table>
<!--for the demo purpose, I changed the type of the input to 'text' to see the result, don't forget to change to 'hidden' again.-->
<input id="hidden" type="text" name="hidden">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Надеюсь, я подтолкнул вас дальше.