使用动态父和子复选框时出现问题
Issue using dynamic parent and child checkboxes
这是的实时演示
问题:复选框不是以动态的方式工作的,而且多个div应该是动态的,在这个例子中有5个。
<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>
<div>
<input type="checkbox" class="parentCheckBox" /> Parent 3 <a onclick="document.getElementById('div_3').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_3').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_3" style="display:none;">
<ul>
<li><input type="checkbox" class="childCheckBox" />Child 3-1 </li>
<li><input type="checkbox" class="childCheckBox" />Child 3-2 </li>
<li><input type="checkbox" class="childCheckBox" />Child 3-3 </li>
</ul>
</div>
</div>
<div>
<input type="checkbox" class="parentCheckBox" /> Parent 4 <a onclick="document.getElementById('div_4').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_4').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_4" style="display:none;">
<ul>
<li><input type="checkbox" class="childCheckBox" />Child 4-1 </li>
<li><input type="checkbox" class="childCheckBox" />Child 4-2 </li>
<li><input type="checkbox" class="childCheckBox" />Child 4-3 </li>
</ul>
</div>
尝试过这个:
$(document).ready(
function() {
//clicking the parent checkbox should check or uncheck all child checkboxes
$(".parentCheckBox").click(
function() {
$(this).parents('div:eq(0)').find('.childCheckBox').attr('checked', this.checked);
}
);
//clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
$('.childCheckBox').click(
function() {
if ($(this).parents('div:eq(0)').find('.parentCheckBox').attr('checked') == true && this.checked == false)
$(this).parents('div:eq(0)').find('.parentCheckBox').attr('checked', false);
if (this.checked == true) {
var flag = true;
$(this).parents('div:eq(0)').find('.childCheckBox').each(
function() {
if (this.checked == false)
flag = false;
}
);
$(this).parents('div:eq(0)').find('.parentCheckBox').attr('checked', flag);
}
}
);
}
);
试试这个:
$(document).on('change', '.parentCheckBox', function() {
var that = $(this);
that.closest('div').find('.childCheckBox').prop('checked', that.is(':checked'));
});
$(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;
parChk.prop('checked', checked);
console.log(checked);
});
检查DEMO
编辑
如果理解正确,则仅当选中所有子元素时,才希望选中父复选框。要实现这种行为,只需更改以下行:
var checked = c > 0;
至
var checked = c == par.find('.childCheckBox').length;
更新的演示
相关文章:
- 复选框与文本内联-JS问题
- 选中复选框的Jquery/Javascript问题使用输入框操作将行从一个表添加到另一个表
- ASP MVC复选框表单提交问题
- 格式问题:下拉复选框
- AngularJS复选框通过$event.target更改问题
- 使用 php 和 javascript Ajax 发送复选框值时遇到问题
- 复选框问题
- jQuery复选框未选中检测问题
- 我正试图获得一个带有复选框的多选下拉列表,在填充项目和获得所有选中的工作时遇到了一些问题
- 使用Knockout和复选框进行ajax调用的问题
- 使用动态父和子复选框时出现问题
- webkit浏览器中的复选框问题
- 复选框说明使用javascript的检索问题
- 为每个选中的复选框显示相同的问题集.(PHP和JS/Jquery)
- Jstree-Can't在AJAX调用中选中复选框,适用于经典调用.一个问题
- AJAX 调用 PHP 复选框问题
- 取消选择所有复选框时出现问题 Un 选中子项之一
- Javascript 价格计算器问题(复选框)
- IE9 问题:动态创建(通过 innerHTML)选项按钮和复选框不起作用
- 这里出了什么问题?复选框不起作用