JQuery的复选框选中取消全选，全不选问题

Posted 2020-07-04 Vincent_uniqueness

一、必须引入JQuery库：   
下面是js代码：

 /***
  * 服务管理块>>>复选框事件处理
  */
    //服务管理复选框被选中、取消
$(function(){

　　$("#ServiceManageMent").click(function(){
        if(this.checked){
            $(".checkb3").each(function(){
                this.checked = true;
                $(this).val(1);
            });
        }else{
            $(".checkb3").each(function(){
                this.checked = false;
                $(this).val(0);
            });
        }
    });
    //服务创建被选中、取消
    $("#serviceCreate,#serviceDispatch,#serviceDeal,#serviceArch,#serviceFeedback").click(function(){
        var $serviceCreate = $("#serviceCreate").is(":checked");
        var $serviceDispatch = $("#serviceDispatch").is(":checked");
        var $serviceDeal = $("#serviceDeal").is(":checked");
        var $serviceFeedback = $("#serviceFeedback").is(":checked");
        var $serviceArch = $("#serviceArch").is(":checked");
        if(this.checked){
            //如果服务创建被选中，则判断其它复选框是否处于选中状态，如果都处于选中状态，则改变服务管理的选中状态
            if($serviceCreate){
                $("#serviceCreate").val(1);
            }else{
                $("#serviceCreate").val(0);
            }
            if($serviceDispatch){
                $("#serviceDispatch").val(1);
            }else{
                $("#serviceDispatch").val(0);
            }
            if($serviceDeal){
                $("#serviceDeal").val(1);
            }else{
                $("#serviceDeal").val(0);
            }
            if($serviceFeedback){
                $("#serviceFeedback").val(1);
            }else{
                $("#serviceFeedback").val(0);
            }
            if($serviceArch){
                $("#serviceArch").val(1);
            }else{
                $("#serviceArch").val(0);
            }
            if($serviceCreate && $serviceDispatch && $serviceDeal && $serviceFeedback && $serviceArch){
                $("#ServiceManageMent").each(function(){
                    this.checked = true;
                });
            }else{
                    $("#ServiceManageMent").each(function(){
                        this.checked = false;
                    });
                }
        }else{
            $(this).val(0);
            $("#ServiceManageMent").each(function(){
                this.checked = false;
            });
        }
    });

});

    

jsp页面核心代码：

 

服务管理<input id="ServiceManageMent" class="checkb" type="checkbox"/><br/>
                    <s:if test="%{#request.r.serviceCreate ==1 }">
                       &nbsp;服务创建<input id="serviceCreate" class="checkb3"  type="checkbox"  checked="checked" name="role.serviceCreate"  value="1"/><br/>
                    </s:if>
                    <s:else>&nbsp;服务创建<input id="serviceCreate" class="checkb3"  type="checkbox" name="role.serviceCreate" value="0"/></s:else><br/>
                    <s:if test="%{#request.r.serviceDispatch ==1}">
                       &nbsp;服务分配<input id="serviceDispatch" class="checkb3"  type="checkbox" checked="checked" name="role.serviceDispatch"  value="1"/><br/>
                    </s:if>
                    <s:else>&nbsp;服务分配<input id="serviceDispatch" class="checkb3"  type="checkbox"name="role.serviceDispatch" value="0"/></s:else><br/>
                    <s:if test="%{#request.r.serviceDeal ==1}">
                       &nbsp;服务处理<input id="serviceDeal" class="checkb3"  type="checkbox" checked="checked" name="role.serviceDeal"  value="1"/><br/>
                    </s:if>
                    <s:else> &nbsp;服务处理<input id="serviceDeal" class="checkb3"  type="checkbox" name="role.serviceDeal" value="0"/></s:else><br/>
                    <s:if test="%{#request.r.serviceFeedback ==1}">
                       &nbsp;服务反馈<input id="serviceFeedback" class="checkb3"  type="checkbox" checked="checked" name="role.serviceFeedback"  value="1"/><br/>
                    </s:if>
                    <s:else>&nbsp;服务反馈<input id="serviceFeedback" class="checkb3"  type="checkbox" name="role.serviceFeedback" value="0"/></s:else><br/>
                    <s:if test="%{#request.r.serviceArch ==1}">
                       &nbsp;服务归档<input id="serviceArch" class="checkb3"  type="checkbox" checked="checked" name="role.serviceArch" value="1"/><br/>
                    </s:if>
                    <s:else>&nbsp;服务归档<input id="serviceArch" class="checkb3"  type="checkbox"name="role.serviceArch" value="0"/></s:else><br/>

 

Notes:

jsp文件中，大家会看到【 <s:if test="%{#request.r.serviceCreate ==1 }">】这个代码，不要疑惑，这是Struts2的标签和表达式，

不用理会它，虽然代码有些多，重在思想。各路神，请多指教！