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

一、必须引入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的标签和表达式,

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

原文地址:https://www.cnblogs.com/vincentExclusiveBlog/p/5354404.html