изменить значение флажка, когда установлен или не установлен флажок для всех и индивидуально

Question

У меня есть несколько флажков. Здесь один флажок для выбора всех. когда я проверяю все остальное проверяется и значение становится единым. если я уберу галочку со всего, то останется без галочки и значение станет равным нулю. и теперь мне нужно, если отмечены отдельные флажки, их следует проверить, и их значение должно быть равно единице. Я больше не могу делать это правильно. пожалуйста, помогите мне. Вот мой код:

JS:

$('#all').click(function() {
  if ($(this).is(':checked')) {
    $('div input').attr('checked', true);
    $('input[type=checkbox]:checked').attr('value', 1);
  } else {
    $('div input').attr('checked', false);
    $('input[type=checkbox]').attr('value', 0);
  }
});

HTML:

<div class="permission_box fitng">
  <h5 class="post-aside-title">Permissões para <span id="copy_email"></span></h5>
  <fieldset style="width:118%;">
    <div class="form-wrap">
      <input type="checkbox" id="all" name="all">
      <label for="Sobre">Selecionar todas</label>
    </div>
    <div class="divider divider-gray-100 position-relative"></div>
    <div class="form-wrap">
      <input type="checkbox" id="bank_transfer" name="bank_transfer">
      <label for="bank_transfer">Permite solicitar transferência bancária</label>
    </div>
    <div class="form-wrap">
      <input type="checkbox" id="pay_rate" name="pay_rate">
      <label for="pay_rate">Permite visualizar taxa de pagamento</label>
    </div>
    <div class="form-wrap">
      <input type="checkbox" id="fin_report" name="fin_report">
      <label for="fin_report">Permitir visualizar relatórios financeiros da organização</label>
    </div>
    <div class="form-wrap">
      <input type="checkbox" id="event_page" name="event_page">
      <label for="event_page">Permite gerenciar a página do evento</label>
    </div>
    <div class="form-wrap">
      <input type="checkbox" id="manage_certifi" name="manage_certifi">
      <label for="manage_certifi">Permite gerenciar certificados</label>
    </div>
    <div class="form-wrap">
      <input type="checkbox" id="manage_con" name="manage_con">
      <label for="manage_con">Permite gerenciar contatos</label>
    </div>
</div>

Answer 1

Вам необходимо установить значения для флажков:

<input name='chx' type='checkbox' value='1'>

Если флажок установлен, он будет иметь значение 1, в противном случае его значение будет равно False (0, false,! Value и т. Д. c). ). Не нужно беспокоиться о значении непроверенного флажка, потому что во время события отправки он будет игнорироваться. Также нет необходимости использовать jQ для установки значения флажка.

В демоверсии, когда событие изменения срабатывает на input#ALL - все флажки установлены, если input#ALL:checked, в противном случае все не отмечены.

Вторая функция просто имитирует, какие значения будут отправлены при отправке.

Демо

Примечание: Подробности прокомментированы в демо

/*
change event on input#ALL
if #ALL.checked = chx: true else false
All checkboxes "checked" prop/attr = chx
*/
$('#ALL').on('change', function(e) {
  let chx = $(this)[0].checked ? true : false;
  $(':checkbox').prop('checked', chx);
});

/*
if any checkbox is unchecked then #ALL will be unchecked as well
*/
$(':checkbox:not(#ALL)').on('change', function(e) {
  if (!$(this).is(':checked')) {
    $('#ALL').prop('checked', false);
  }
});

/*
click on button
Collect all checked checkboxes values return as array
Set output#view value to the array of values
*/
$('button').on('click', function(e) {
  let val = $(':checkbox:checked').map(function() {
    return $(this).val();
  }).get();
  $('#view').val(val);
});

:root,
body {
  font: 700 4vw/1.45 Verdana;
  background: #fff;
}

fieldset {
  width: max-content;
}

label {
  display: block;
  cursor: pointer;
  padding: 3px 6px;
}

label:hover {
  background: #000;
  color: #fff;
}

label::after {
  content: ' 'attr(class)' ';
  font: inherit;
  display: inline-block;
  vertical-align: middle;
}

.ALL,
input,
button {
  font: inherit;
  display: inline-block;
  vertical-align: middle;
}

#view {
  display: block;
  width: 18ch;
  height: 2vw;
  margin: -6px auto 12px;
}

<fieldset>
  <legend>
    <label class='ALL'>
      <input id='ALL' name='ALL' type='checkbox' value='ALL'>
    </label>
    <button>CHECK</button>
  </legend>
  <output id='view'></output>
  <label class='A'>
    <input name='A' type='checkbox' value='A1'>
  </label>
  <label class='B'>
    <input name='B' type='checkbox' value='B2'>
  </label>
  <label class='C'>
    <input name='C' type='checkbox' value='C3'>
  </label>
  <label class='D'>
    <input name='D' type='checkbox' value='D4'>
  </label>
  <label class='E'>
    <input name='E' type='checkbox' value='E5'>
  </label>
  <label class='F'>
    <input name='F' type='checkbox' value='F6'>
  </label>
</fieldset>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>