zoukankan      html  css  js  c++  java
  • 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的标签和表达式,

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

  • 相关阅读:
    “2O9”学习小组第五周学习总结(10、11章)
    2020—2021—1学期 20202408《网络空间安全导论》第五周学习总结
    2020—2021—1学期 20202408《网络空间安全导论》第四周学习总结
    “2O9”学习小组第二周学习总结(8、9章)
    “2O9”学习小组第二周学习总结(6、7章)
    2020—2021—1学期 20202408《网络空间安全导论》第三周学习总结
    “2O9”学习小组第二周学习总结(4、5章)
    2020—2021—1学期 20202408《网络空间安全导论》第二周学习总结
    Python字符串格式化的三种形式
    关于python函数几点注意
  • 原文地址:https://www.cnblogs.com/vincentExclusiveBlog/p/5354404.html
Copyright © 2011-2022 走看看