将值更改为动态父和子复选框

添加更新子值的逻辑。

$(document).on('change', '.parentCheckBox', function() {
    var that = $(this);
  that.closest('div').find('.childCheckBox').prop('checked', that.is(':checked')).val(that.is(':checked')?1:0);
});
$(document).on('change', '.childCheckBox', function() {
    var that = $(this);
    $(this).val($(this).prop('checked') ? 1 : 0);
    var par = that.closest('ul');
    var c = par.find('.childCheckBox').filter(':checked').length;
    var parChk = par.closest('div').parent().find('.parentCheckBox');
    var checked = c > 0;
    parChk.prop('checked', checked);
    console.log(checked);
});

我不能100%确定你想要完成什么，但这里有两个我认为你想要做的非常直接的例子。

这通常不是使用复选框的方式。它们有一个值集，默认情况下，所有复选框的值都为"on"。但是您也可以使用1或任何其他值。没有必要改变它们的价值。如果复选框被选中，决定它是否会发布该值，如果这是一个表单。

但是，为了演示如何根据更改来更改值，我举了两个例子。

简化示例：

HTML:

  <ul>
    <li><input type="checkbox" class="childCheckBox">Child 1-1 </li>
    <li><input type="checkbox" class="childCheckBox">Child 1-2 </li>
    <li><input type="checkbox" class="childCheckBox">Child 1-3 </li>
  </ul>

JavaScript:

// When checkbox is changed
$('.childCheckBox').on('change', function(e){
  // Check if its checked
  if($(this).prop('checked')) {
    // If checked, set value to 1
    $(this).val(1);
  } else {
    // If not checked, set value to 0
    $(this).val(0);
  }
  // Log value of changed checkbox
  console.log($(this).val());
});

https://jsbin.com/mewefegopi/edit?html，js，输出

带有父母的较长示例：

HTML:

  <div class="wrapper">
    <input type="checkbox" class="parentCheckBox" /> Parent 1
    <ul>
      <li><input type="checkbox" class="childCheckBox">Child 1-1 </li>
      <li><input type="checkbox" class="childCheckBox">Child 1-2 </li>
      <li><input type="checkbox" class="childCheckBox">Child 1-3 </li>
    </ul>
  </div>
  <div class="wrapper">
    <input type="checkbox" class="parentCheckBox" /> Parent 2
    <ul>
      <li><input type="checkbox" class="childCheckBox">Child 2-1 </li>
      <li><input type="checkbox" class="childCheckBox">Child 2-2 </li>
      <li><input type="checkbox" class="childCheckBox">Child 2-3 </li>
    </ul>
  </div>

JavaScript:

// When parent checkbox is changed
$('.parentCheckBox').on('change', function(e){
  var self = this;
  // Get all child checkboxes
  var childs = $(this).closest('.wrapper').find('.childCheckBox');
  // Go though all childs
 $(childs).each(function(i, e){
   // If parent is checked set child value to 1
   if($(self).prop('checked')) {
     $(this).val(1);
   } else { // ...else set child value to 0
     $(this).val(0);
   }
  });
});

https://jsbin.com/qisizudupa/edit?html，js，输出

$(document).on('click', '.childCheckBox', function(e) {
  var childCheckBoxInput = $(e.target);
  if (childCheckBoxInput.is(':checked')) {
    chilCheckBoxInput.val(1);
  } else {
    childCheckBoxInput.val(0);
  }
});