Question

问题：尝试根据动态复选框更改值：

当我点击父对话框时应该更改值=＆＃34; 1＆＃34;关于孩子

<input type="checkbox" class="parentCheckBox" value="1">     
<input type="checkbox" class="childCheckBox" value="1">
<input type="checkbox" class="childCheckBox" value="1">

当我取消选中父级时应该是值=＆＃34; 0＆＃34;关于孩子

<input type="checkbox" class="parentCheckBox" value="0">     
<input type="checkbox" class="childCheckBox" value="0">
<input type="checkbox" class="childCheckBox" value="0">

代码：

<script src="https://code.jquery.com/jquery-2.2.1.js"></script>

<div>
  <input type="checkbox" class="parentCheckBox" /> Parent 1  <a onclick="document.getElementById('div_1').style.display='';return false;"><img src="https://cdn0.iconfinder.com/data/icons/ie_Bright/512/plus_add_green.png" height="20" width="20"></a>  <a onclick="document.getElementById('div_1').style.display='none';return false;"><img src="https://cdn0.iconfinder.com/data/icons/ie_Bright/512/minus_remove_green.png" height="20" width="20"></a><br />
  <div id="div_1" style="display:none;">
    <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>

<div>
  <input type="checkbox" class="parentCheckBox" /> Parent 2  <a onclick="document.getElementById('div_2').style.display='';return false;"><img src="https://cdn0.iconfinder.com/data/icons/ie_Bright/512/plus_add_green.png" height="20" width="20"></a>  <a onclick="document.getElementById('div_2').style.display='none';return false;"><img src="https://cdn0.iconfinder.com/data/icons/ie_Bright/512/minus_remove_green.png" height="20" width="20"></a><br />
  <div id="div_2" style="display:none;">
    <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>    
</div>

脚本：

$(document).on('change', '.parentCheckBox', function() {
   var that = $(this);
   that.closest('div').find('.childCheckBox').prop('checked', that.is(':checked'));
   $(this).val($(this).prop('checked')?1:0);
});

$(document).on('change', '.childCheckBox', function() {
    var that = $(this);
    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;

    $(this).val($(this).prop('checked')?1:0);
    parChk.prop('checked', checked);
    console.log(checked);
});

Answer 1

添加逻辑以更新子值。

$(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);
});

Answer 2

$(document).on('click', '.childCheckBox', function(e) {

  var childCheckBoxInput = $(e.target);

  if (childCheckBoxInput.is(':checked')) {
    chilCheckBoxInput.val(1);
  } else {
    childCheckBoxInput.val(0);
  }

});

Answer 3

我不是100％肯定你想要完成的事情，但这里有两个非常直接的例子，我认为你想要做的事情。

这通常不是您使用复选框的方式。它们有一个值集，默认情况下，所有复选框的值都为＆＃39; on＆＃39;。但您也可以使用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,output

与父母相关的更长的例子：

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,output

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

3 个答案: