父母和子女复选框

  Parent element
  Child element
  Child element
 


  Parent element2
  Child element2
  Child element2
 


  Parent element3
  Parent element4
  

页面上有一些复选框。 我需要：

1. 检查所有孩子是否选中父母。
2. 如果未选中所有子项，请取消选中父项。
3. 如果至少检查了一个孩子，请检查父母。

这是一些代码，但它不起作用

  $('input[type=checkbox]').change(function() { var id = $(this).attr('id'); var children = $('.parent-' + id); //Is this a child if (children.length) { //Is it checked if ($(this).is(':checked')) { //Find the parent var className = $(this).attr('class'); var pId = className.replace("parent-",""); //If the parent is not checked, then check this parent if (!$(pId).is(':checked')) $(pId).attr('checked','checked'); } //Is it NOT checked else{ //Do other childs are not checked too? //var className2 = $(this).attr('class'); //$(className2) } } //If this is a parent, then check all childs esle{ children.attr('checked', $(this).attr('checked')); } }); 

Answer 1

在这里，我为您编写代码： http ： //jsfiddle.net/PUWZX/4/

Answer 2

我没有检查你的所有脚本，但是先告诉我你是否放入了这段代码

 $(document).ready(function() { .... }); 

如果jquery在你的页面上工作？

Answer 3

试试这个， http：//jsfiddle.net/erick/dd6Qr/

 // 1. Check all childs if parent is checked $("#s9").change(function(){ if($(this).is(':checked')) { var cls = '.parent-' + $(this).attr('id'); $(cls).attr('checked', true); } }); $('input[class*="parent"]').change(function(){ var cls = '.' + $(this).attr('class') + ':checked'; var len = $(cls).length; var parent_id = '#' + $(this).attr('class').split('-')[1]; // 3. Check parent if at least one child is checked if(len) { $(parent_id).attr('checked', true); } else { // 2. Uncheck parent if all childs are unchecked. $(parent_id).attr('checked', false); } });