Javascript 未选中所需的复选框

我想要的是：

当我点击Reporting复选框时，它应该选中它下面的所有复选框。我是说 报告、电子邮件组、短信组、状态组、通话结果下面的所有复选框 组，如图所示。我认为这是一个理想的案例

目前正在发生的事情：

当我单击Reporting时，只有选中的复选框从 将活动报告给新的测试报告。什么事也没有发生 电子邮件组及其子项复选框以及类似的SMS组、状态组 和呼叫结果组。所以，我必须手动点击电子邮件组和其他组来选择它的孩子

我已经定义了我在这里使用的以下函数：

JS Fiddle链接：

请让我知道我在这里做错了什么，或者需要做哪些修改

这是我的coldfusion代码：

<ul class="list_permisstion">

            <cfif listfindNoCase(listAllPermission,Reporting_Title) GT 0>
                <span class="label_permission">
                    <cfset Checked_checkbox = false>
                    <cfif listfindNoCase(checkedAllPermistion,Reporting_Title) GT 0>
                        <cfset Checked_checkbox = true>
                    </cfif> 
                    <cfinput type="checkbox" name="#Reporting_Title#" id="Reporting" onclick = "parentCheckboxCheck(this,'.ReportingChilds', '')" value="#Reporting_Title#" checked="#Checked_checkbox#"> 
                    <label class="label_permission" for="Reporting">#Reporting_Title#</label>
                </span>
            </cfif>

            <ul class="list_permisstion">

                <cfloop array="#Reporting_List#" index="ListLoop" >

                    <cfif listfindNoCase(listAllPermission,ListLoop) GT 0>
                        <li>
                            <cfset Checked_checkbox = false>
                            <cfif listfindNoCase(checkedAllPermistion,ListLoop) GT 0>
                                <cfset Checked_checkbox = true>
                            </cfif>
                            <cfinput type="checkbox" name="#ListLoop#" id="ListLoop" class="ReportingChilds" value="#ListLoop#" checked="#Checked_checkbox#"> 
                            <label for="label_permission">#ListLoop#</label>
                        </li>
                    </cfif>

                </cfloop>


            </ul>
            <!--- For Email Group --->
            <ul class="list_permisstion">

                <cfif listfindNoCase(listAllPermission,Reporting_Group_Title) GT 0>
                    <span class="label_permission"> 
                        <cfset Checked_checkbox = false>
                        <cfif listfindNoCase(checkedAllPermistion,Reporting_Group_Title) GT 0>
                            <cfset Checked_checkbox = true>
                        </cfif> 
                        <cfinput type="checkbox" name="#Reporting_Group_Title#" id="ReportGroup" onclick = "parentCheckboxCheck(this,'.reportGroupChilds','Reporting')" class="reportingChilds" value="#Reporting_Group_Title#" checked="#Checked_checkbox#"> 
                        <label for="ReportGroup">#Reporting_Group_Title#</label> 
                    </span>
                </cfif>

                <cfloop array="#Reporting_Group_List#" index="ListLoop" >

                    <cfif listfindNoCase(listAllPermission,ListLoop) GT 0>
                        <li>
                            <cfset Checked_checkbox = false>
                            <cfif listfindNoCase(checkedAllPermistion,ListLoop) GT 0>
                                <cfset Checked_checkbox = true>
                            </cfif>
                            <cfinput type="checkbox" name="#ListLoop#" id="ListLoop" class="reportGroupChilds" value="#ListLoop#" checked="#Checked_checkbox#"> 
                            <label for="ReportGroup">#ListLoop#</label>
                        </li>
                    </cfif>

                </cfloop>

            </ul>
             <!--- For SMS Group --->
             <ul class="list_permisstion">

                <cfif listfindNoCase(listAllPermission,Reporting_SMS_Group_Title) GT 0>
                    <span class="label_permission"> 
                        <cfset Checked_checkbox = false>
                        <cfif listfindNoCase(checkedAllPermistion,Reporting_SMS_Group_Title) GT 0>
                            <cfset Checked_checkbox = true>
                        </cfif> 
                        <cfinput type="checkbox" name="#Reporting_SMS_Group_Title#" id="ReportSMSGroup" onclick = "parentCheckboxCheck(this,'.reportSMSGroupChilds','Reporting')" class="reportingSMSChilds" value="#Reporting_SMS_Group_Title#" checked="#Checked_checkbox#"> 
                        <label for="ReportSMSGroup">#Reporting_SMS_Group_Title#</label> 
                    </span>
                </cfif>

                <cfloop array="#Reporting_SMSGroup_List#" index="ListLoop" >

                    <cfif listfindNoCase(listAllPermission,ListLoop) GT 0>
                        <li>
                            <cfset Checked_checkbox = false>
                            <cfif listfindNoCase(checkedAllPermistion,ListLoop) GT 0>
                                <cfset Checked_checkbox = true>
                            </cfif>
                            <cfinput type="checkbox" name="#ListLoop#" id="ListLoop" class="reportSMSGroupChilds" value="#ListLoop#" checked="#Checked_checkbox#"> 
                            <label for="ReportSMSGroup">#ListLoop#</label>
                        </li>
                    </cfif>

                </cfloop>

            </ul> 
            <!--- For STATES GROUP --->
            <ul class="list_permisstion">

                <cfif listfindNoCase(listAllPermission,Reporting_States_Group_Title) GT 0>
                    <span class="label_permission"> 
                        <cfset Checked_checkbox = false>
                        <cfif listfindNoCase(checkedAllPermistion,Reporting_States_Group_Title) GT 0>
                            <cfset Checked_checkbox = true>
                        </cfif> 
                        <cfinput type="checkbox" name="#Reporting_States_Group_Title#" id="ReportSTATESGroup" onclick = "parentCheckboxCheck(this,'.reportSTATESGroupChilds','Reporting')" class="reportingSTATESChilds" value="#Reporting_States_Group_Title#" checked="#Checked_checkbox#"> 
                        <label for="ReportSTATESGroup">#Reporting_States_Group_Title#</label> 
                    </span>
                </cfif>

                <cfloop array="#Reporting_StatesGroup_List#" index="ListLoop" >

                    <cfif listfindNoCase(listAllPermission,ListLoop) GT 0>
                        <li>
                            <cfset Checked_checkbox = false>
                            <cfif listfindNoCase(checkedAllPermistion,ListLoop) GT 0>
                                <cfset Checked_checkbox = true>
                            </cfif>
                            <cfinput type="checkbox" name="#ListLoop#" id="ListLoop" class="reportSTATESGroupChilds" value="#ListLoop#" checked="#Checked_checkbox#"> 
                            <label for="ReportSTATESGroup">#ListLoop#</label>
                        </li>
                    </cfif>

                </cfloop>

            </ul>

            <!--- For CALL RESULTS Group --->

            <ul class="list_permisstion">

                <cfif listfindNoCase(listAllPermission,Reporting_CallResults_Group_Title) GT 0>
                    <span class="label_permission"> 
                        <cfset Checked_checkbox = false>
                        <cfif listfindNoCase(checkedAllPermistion,Reporting_CallResults_Group_Title) GT 0>
                            <cfset Checked_checkbox = true>
                        </cfif> 
                        <cfinput type="checkbox" name="#Reporting_CallResults_Group_Title#" id="ReportSTATESGroup" onclick = "parentCheckboxCheck(this,'.reportCALLRESULTSGroupChilds','Reporting')" class="reportingCALLRESULTSChilds" value="#Reporting_CallResults_Group_Title#" checked="#Checked_checkbox#"> 
                        <label for="ReportCALLRESULTSGroup">#Reporting_CallResults_Group_Title#</label> 
                    </span>
                </cfif>

                <cfloop array="#Reporting_CallResultsGroup_List#" index="ListLoop" >

                    <cfif listfindNoCase(listAllPermission,ListLoop) GT 0>
                        <li>
                            <cfset Checked_checkbox = false>
                            <cfif listfindNoCase(checkedAllPermistion,ListLoop) GT 0>
                                <cfset Checked_checkbox = true>
                            </cfif>
                            <cfinput type="checkbox" name="#ListLoop#" id="ListLoop" class="reportCALLRESULTSGroupChilds" value="#ListLoop#" checked="#Checked_checkbox#"> 
                            <label for="ReportCALLRESULTSGroup">#ListLoop#</label>
                        </li>
                    </cfif>

                </cfloop>

            </ul>

</ul> 

---

您在的块中有所有复选框。如果我理解正确，您需要选中该块中的所有复选框。因此，基本上你需要得到该块中的所有复选框。jQuery find函数通过所选元素的子元素进行搜索，在您的情况下，该子元素将是。检查

示例函数如下所示，其中childrenClass是需要检查的复选框容器的类名

function parentCheckboxCheck(obj, childrenClass, parentId ){
        if($(obj).is(':checked')){
            $(childrenClass).find('input[type="checkbox"]').attr('disabled',false);
            $(childrenClass).find('input[type="checkbox"]').attr('checked',true);
        }
        else {
            $(childrenClass).find('input[type="checkbox"]').attr('checked',false);
            $(childrenClass).find('input[type="checkbox"]').attr('disabled',true);
        }
}

---

从小提琴来看，我认为你有几个选择。在对parentCheckboxCheck的调用中，您可以将每个应该受影响的类添加到childrenClass参数中，例如，当检查报告时，调用将是parentCheckboxCheckthis，'.reportGroupChilds.ReportsGroupChilds.ReportsGroupChilds等。。忽略parentID。另一个选项是更改parentCheckboxcheck，使用JQuery遍历DOM，以获取该复选框后面的所有元素，并在那里选中/禁用它们

好的，第一个选项的代码将在您的html中

<cfinput type="checkbox" name="#Reporting_Title#" id="Reporting" onclick="parentCheckboxCheck(this,'.ReportingChilds, .reportGroupChilds, .reportSMSGro‌​upChilds, .reportSTATESGroupChilds, .reportCALLRESULTSGroupChilds', '')" value="#Reporting_Title#" checked="#Checked_checkbox#"> 

小提琴：

---

我不清楚您想要禁用或启用什么，但我认为这具有您正在寻找的检查功能。

可能有用：使用.prop而不是.attrI我刚才尝试过，但没有任何更改。您的小提琴中没有复选框。如果您使用的是模板，则需要将生成的HTML复制到FIDLE中。如果代码无法执行，那么使用JSFIDLE有什么意义？将您的代码张贴在问题中。@user3239126-您希望将生成的HTML粘贴到JSFIDLE中，而不是原始CF代码中。因此，任何人都可以在任何浏览器中运行该示例。现在它不是一个可运行的示例，因为它包含服务器端代码。我将其替换为，但它不起作用。您应该将其替换为“.ReportingChilds、.reportGroupChilds、.reportSMSGro”‌​upChilds、.reportSTATESGroupChilds、.reportCALLRESULTSGroupChilds'因为它们都是一个选择器。在你传递一大堆不同的论点之前。这样做只是选择电子邮件组、短信组、状态组和通话结果组，而不是他们的孩子，这也是第一次。当我再次单击“报告”复选框时，没有任何信号发生。你认为也有办法选择children元素吗？第二种选择是行为怪异。这就是我不测试的原因。编辑应该有正确的答案。你能为我的一个小组比如说电子邮件小组提供一个例子吗。谢谢

<cfinput type="checkbox" name="#Reporting_Title#" id="Reporting" onclick="parentCheckboxCheck(this,'.ReportingChilds, .reportGroupChilds, .reportSMSGro‌​upChilds, .reportSTATESGroupChilds, .reportCALLRESULTSGroupChilds', '')" value="#Reporting_Title#" checked="#Checked_checkbox#"> 

   function parentCheckboxCheck(obj, childrenClass, parentId ){
        var el = $(obj);
        el.closest('.list_permisstion')
            .find(':checkbox')
            .not(this).each(function(){
                $(this).prop('checked', el.is(':checked'));
            });
    };