Javascript 父和子复选框

我还没有检查你所有的脚本，但是如果你把这个代码放到

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

        }


     });

如果jquery在您的页面上起作用？

试试这个

---

在这里，我为您编写了代码：

var checkboxHandlerObj={
init:function（）{
$（“#customerServices输入：复选框[class=“parent”]”）。单击（复选框HandlerObj.parentClicked）；
$（“#customerServices输入：复选框[class^=“parent-”]）。单击（复选框HandlerObj.childClicked）；
},
parentClicked:function（）{
if（$（this.attr（'checked'））{
$（'#customerServices输入：复选框[class=“parent-'+$（this）.attr（'id'）+'”]）.attr（'checked'，'checked'）；
}否则{
$（'#customerServices输入：复选框[class=“parent-”+$（this）.attr（'id'）+“]）.removeAttr（'checked'）；
}
},
childClicked:function（）{
var temp=$（this.attr（'class'）.split（'-'）；
var parentId=temp[1]；
if（$（this.attr（'checked'））{
$（'#'+parentId）.attr（'checked'，'checked'）；
}否则{
var atLeastOneEnabled=false；
$（'#customerServices输入：复选框[class=“”+$（this）.attr（'class'）+“]）。每个（函数（）{
if（$（this.attr（'checked'））{
atLeastOneEnabled=true；
}
});
如果（！Atlastone已启用）{
$（'#'+parentId）.removeAttr（'checked'）；
}
}
}
};
checkboxHandlerObj.init（）

父元素

子元素

子元素





父元素2

子元素2

子元素2





父元素3

父元素4

s10、#s101、#s102怎么样？看起来可以循环？也许把它们放在一个数组中并循环使用。也许可以简化如下代码片段中的函数：
parentClicked:function（）{var parentCheck=this.checked；$（'#customerServices input:checkbox[class=“parent-'+$（this.attr（'id'）+''''））。每个（function（）{this.checked=parentCheck；}），
和子函数片段：
childClicked:function（）{var temp=$（this）.attr（'class'）.split（'-'）；var parentId=temp[1]；$（'#'+parentId）[0]。checked=$（'#customerServices input:checkbox[class=“'+$（this）.attr（'class'）+'）：checked'）。长度！==0；
  $('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'));

        }


     });

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

// 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);
    }
});