• 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的标签和表达式,

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

  • 相关阅读:
    基于p2p聊天室的原理介绍.个人学习笔记
    一个可移植数据库操作组件的简单介绍
    常见任务
    sql常用语句
    认真写写SQLAlchemy
    Jenkins 安装与使用手册
    Ajax
    支持主流注册中心,SolarMesh发布新版本 SolarMesh
    API标准化对Dapr的重要性
    企业数字化转型,你知道有哪些关键要素吗?
  • 原文地址:https://www.cnblogs.com/vincentExclusiveBlog/p/5354404.html
Copyright © 2020-2023  润新知