checkbox，联动菜单的效果

最新推荐文章于 2021-06-03 17:53:45 发布
最新推荐文章于 2021-06-03 17:53:45 发布
阅读量1.3k 收藏
点赞数 
 
 

  
  

   
   -------------让input文本框去除相同的值，
  
  

  
  

   
    $("#"+checkIdsId).val($("#"+checkIdsId).val().replace(","+$("#"+liId).attr("value") , ""));

  
  

  
  

   
    $(" #"+checkIdsId).val($("#"+checkIdsId).val().replace(","+liId, ""));

  
  

  
  

   
   

  
  

  
  

   
   -------------------------------------------------------左右控件选择--------------------------------
  
  

  
  

   
   

  
  

  
  

   
   

  
  

  
  

   
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!--引入c.fmt,fn  -->
<%@include file="new_css_script_loader.jsp"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<title></title>
<script language="javascript" type="text/javascript" src="<%=request.getContextPath()%>/js/login/jquery-1.8.2.min.js"></script>


<script language="javascript" type="text/javascript" src="<%=request.getContextPath()%>/js/login/jquery-1.8.2.min.js"></script>


<script language="javascript" type="text/javascript" src="<%=request.getContextPath()%>/scripts/common_util.js"></script>


<!--引入css样式  -->
<link href="<%=request.getContextPath()%>/css/md_xx.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/post/luntan.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/md_gl.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/md_xx.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/post/gg.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/post/choise.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/post/stylenew.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/post/info.css" rel="stylesheet" type="text/css" />


<style type="text/css">
/*调整的样式*/
#contents{ width:100%; padding-top:4px; overflow:hidden; height:1200px; padding:20px 10px; background-color:#f4f4f4;}
.contentR{ float:left; overflow:hidden; width:830px; background-color:#fff; height:1140px; padding:10px 0;}
.contwrap .search{width:100%;overflow:hidden;  border:1px solid #e3e3e3;}
.contwrap .search .title{ width:99%; height:26px; line-height:26px;padding-left:1%;   background-color:#f8f8f8; border-bottom:1px solid #e3e3e3;}
.contwrap .tab1 th{ border-top:1px solid #e3e3e3;background-color:#f8f8f8; line-height:35px; height:35px; font-weight:bold;}
.contwrap .tab1 td{ text-align:center;border-top:1px solid #e3e3e3; line-height:25px; height:35px;}
.contwrap .page{ height:36px; line-height:36px; padding-left:1%; border:0px; background-color:#fff; text-align:right;}


/*30高度*/
.but_30{ width:60px; height:30px; line-height:28px; background:url(<%=request.getContextPath()%>/images/btn_30.jpg) left top no-repeat; color:#fff; display:block;text-align:center; font-size:14px; float:left; margin:10px 0px 10px 20px; *margin:0px 0px 0px 10px;text-decoration: none;}
.but_30:hover{ background-position:right top;}
.but_30_1{background:url(<%=request.getContextPath()%>/images/btn_30_1.jpg) left top no-repeat; color:#333;}
/*25高度*/
.btn_25{ width:60px; height:25px; line-height:23px; color:#fff; display:block; overflow:hidden; text-align:center; font-size:14px; float:left; margin:2px 10px 0 10px;background:url(<%=request.getContextPath()%>/images/btn_25.jpg) left top no-repeat;text-decoration: none;}
.btn_25:hover{ background-position:right top;}
.btn_25_100{ width:100px; background:url(<%=request.getContextPath()%>/images/btn_100.jpg) left top no-repeat; }
.but_25_1{ background:url(<%=request.getContextPath()%>/images/btn_25_2.jpg) left top no-repeat; color:#333;}


</style>


<script type="text/javascript" charset="utf-8" src="<%=request.getContextPath()%>/scripts/editor/editor/kindeditor.js"></script>
<script type="text/javascript" charset="utf-8" src="<%=request.getContextPath()%>/scripts/editor/editor/zh_CN.js"> </script>
<script type="text/javascript" charset="utf-8" src="<%=request.getContextPath()%>/scripts/editor/editor/examples/jquery.js"></script>


<%-- 单选日历引用 start--%>
<script type="text/javascript" charset="utf-8" src="<%=request.getContextPath()%>/js/My97DatePicker/WdatePicker.js"></script>
<%-- 单选日历引用 end--%>
<script type="text/javascript" >




         var editor;
	    KindEditor.ready(function(K) {
	        KindEditor.options.filterMode = false;
	        editor= K.create('#editor_id', {
	                uploadJson : '../scripts/editor/editor/jsp/upload_json.jsp',
	                fileManagerJson : '../scripts/editor/editor/jsp/file_manager_json.jsp',
	                allowFileManager : false,
	                allowUpload : true,
	                afterBlur : function(){ this.sync(); }
	        });
	    });
	       
	    $(document).ready(function(){
	    	
	    });
	    
	    //返回到列表页面
		 function  callBack(){
			 window.location.href="<%=request.getContextPath()%>/post";
		   }
	    
  $(function(){
	  $("select[name=slt_channelList_store]").change(function(){
		  //获得渠道类型根据渠道类型显示不同的列表
	    	var slt_channelList_store=$("#slt_channelList_store").val();
		        if(slt_channelList_store==-1){
		        	$("#spanagentListstore").hide();
			    	$("#spanareaListstore").hide();
			    	$("#spansubAreaListstore").hide();
		        }
		    if(slt_channelList_store==1){
		    	$("#spanagentListstore").show();
		    	$("#spanareaListstore").hide();
		    	$("#spansubAreaListstore").hide();
		    	//查出人所在对应的代理商
		    	$.post("<%=request.getContextPath()%>/post/queryAreaByChannel",{slt_channelList_store:slt_channelList_store},function(v){
		    		var result = eval("(" + v + ")");
					// 
					var html ='';
					for (var i = 0; i < result.length; i++) {
						html = "<option name='agent_option' value='"+result[i].operatorsNbr+"'>"+result[i].operatorsName+"</option>";
						$("select[name=sltagentListstore]").append(html);
					}
		    	
		    	});
		    	
		    	
		    	
		    }
		    if(slt_channelList_store==2||slt_channelList_store==3){
		    	$("#sltareaListstore").val("-1");
		    	$("#sltsubAreaListstore").val("-1");
		    	//$("#spanagentListstore").css("display","none");
		    	$("#spanareaListstore").show();
		    	$("#spansubAreaListstore").show();
		    	$("#spanagentListstore").hide();
		    	
		    	//根据专营和中小查出不同的区局
		    	var channelType=slt_channelList_store;
		    	
		    	$.post("<%=request.getContextPath()%>/post/postAgentArea",{channelType:channelType},function(v){
		    	
		    		
		    		var result = eval("(" + v + ")");
		    	
					// 
					var html ='';
					for (var i = 0; i < result.length; i++) {
						html = "<option name='area_option' value='"+result[i].areaId+"'>"+result[i].areaName+"</option>";
						$("select[name=sltareaListstore]").append(html);
					}
		    	
		    	});
		    	//以上根据专营和中小查出不同的区局
		    }
		    
		    
		    //人开始了
		    if(slt_channelList_store==-1){
		    	$("#slt_UserList").empty();
		    } 
		    
		    //全渠道显示人
		    if(slt_channelList_store==4){
		    	$("#spanagentListstore").hide();
		    	$("#spanareaListstore").hide();
		    	$("#spansubAreaListstore").hide();
		    	
		  	 
		  		  var sltagentListstore=$("#sltagentListstore").val();
		  	    	$.post("<%=request.getContextPath()%>/post/peoAllChannelpost",{sltagentListstore:sltagentListstore},function(data){
		  	    		
		  	    		var r = eval("(" + data + ")");
		  				 JsonToCheckBox(r,$("#slt_UserList"),$("#slt_UserList_checkIds").val(),true,15);
		  	    	});
		    	
		    	
		    }
		    
		    //如果是开放渠道
		    if(slt_channelList_store==1){
		    	//并显示开放渠道的人
                   $("#sltagentListstore").val("-1")
		  		  var sltagentListstore=$("#sltagentListstore").val();
		  	    	$.post("<%=request.getContextPath()%>/post/peoKaiFangPost",{sltagentListstore:sltagentListstore},function(data){
		  	    		
		  	    		var r = eval("(" + data + ")");
		  				 JsonToCheckBox(r,$("#slt_UserList"),$("#slt_UserList_checkIds").val(),true,15);
		  	    	});
		    }
		    
		    //如果专营中小
		     if(slt_channelList_store==2||slt_channelList_store==3){
		    		$.post("<%=request.getContextPath()%>/post/peoZhuangying",{channelType:slt_channelList_store},function(data){
			    		var r = eval("(" + data + ")");
						
						 JsonToCheckBox(r,$("#slt_UserList"),$("#slt_UserList_checkIds").val(),true,15);
			    });
		    	 
		    	 
		     }
	   });//渠道change事件结尾
	  
	
	   
	   


	   //根据代理商查出对应的人
	  	  $("select[name=sltagentListstore]").change(function(){
	  		  var sltagentListstore=$("#sltagentListstore").val();
	  	    	$.post("<%=request.getContextPath()%>/post/peoKaiFangPostAgent",{operatorsNbr:sltagentListstore},function(data){
	  	    		var r = eval("(" + data + ")");
	  				
	  				 JsonToCheckBox(r,$("#slt_UserList"),$("#slt_UserList_checkIds").val(),true,15);
	  	    });
	  		 
	  	  });
	  	//以上根据代理商查出对应的人


	   
	   
	   
	   
	   
	   
	   
	   
	
	    	//根据区局查出对应的分局
		  $("select[name=sltareaListstore]").change(function(){
	  var area=$("#sltareaListstore").val();
		
		 var channelType=$("#slt_channelList_store").val();
		$("#sltsubAreaListstore").val("-1");
	$.post("<%=request.getContextPath()%>/post/postAgentSubArea",{"channelType":channelType,"area":area},function(v){
		    		var result = eval("(" + v + ")");
					// 
					var html ='';
					
					for (var i = 0; i < result.length; i++) {
						html = "<option name='agent_option' value='"+result[i].subAreaId+"'>"+result[i].subAreaName+"</option>";
						$("select[name=sltsubAreaListstore]").append(html);
					
					}
		    	
		    	});
	
	
	        //显示区局对应人
	
	//以上是根据区局查出相应的人  
	
	// $("select[name=sltareaListstore]").change(function(){
	    	var slt_channelList_store=$("#slt_channelList_store").val();
	    	var  sltareaListstore=$("#sltareaListstore").val();
	    	
	    	$.post("<%=request.getContextPath()%>/post/peoZhuangyingQuJu",{channelAll:slt_channelList_store,sltareaListstore:sltareaListstore},function(data){
	    		var r = eval("(" + data + ")");
				
				 JsonToCheckBox(r,$("#slt_UserList"),$("#slt_UserList_checkIds").val(),true,15);
	    });
	   // });
	
	
	
	
	
		    	});//区局事件结尾
	//以上是根据区局查出对应的分局
	
	
	
//分局事件开始


			 $("select[name=sltsubAreaListstore]").change(function(){
				
			    	var slt_channelList_store=$("#slt_channelList_store").val();
			    	var  sltareaListstore=$("#sltareaListstore").val();
			    var sltsubAreaListstore=$("#sltsubAreaListstore").val();
			    
			    	$.post("<%=request.getContextPath()%>/post/peoZhuangyingFenJu",{channelAll:slt_channelList_store,sltareaListstore:sltareaListstore,sltsubAreaListstore:sltsubAreaListstore},function(data){
			    		var r = eval("(" + data + ")");
						
						 JsonToCheckBox(r,$("#slt_UserList"),$("#slt_UserList_checkIds").val(),true,15);
			    });
			    });
			


	
	


  });
	
	//
  function JsonToCheckBox(jsonData,inputObj,default_value,needClear,maxLength){
   
		if(needClear){
			
        inputObj.empty();
       
    }
    if(default_value!=null&&default_value!=""){
        default_value=","+default_value+",";
    }else{
        default_value='';
    }
    if(jsonData.length>0){
        var jtml="";
        $(jsonData).each(function(){
            var text = this.TEXT;
            if(null != maxLength){
                if(text.length > maxLength){
                    text = text.substr(0,maxLength)+"...";
                }
            }
            jtml+="<li><input class='fxk' type='checkbox' name='checkbox' id='check_"+this.VALUE+"'  value='"+this.VALUE+"' "+(default_value.indexOf(","+this.VALUE+",")!=-1?"checked":"")+"/><span id='span_"+this.VALUE+"'>"+text+"("+this.roleName+")</span></li>"
          
        });
        inputObj.append(jtml);
    }
}
	//对list集合进行操作
	 function addUserList(isMoveAll){
        addRightToLeft($("#slt_UserList"),$("#slt_UserList_check"),$("#slt_UserList_checkIds"),isMoveAll);
 
    }


	
	
	
	
	
	
	    /**
     *
     * @param leftObj 左边控件
     * @param rightObj 右边控件
     * @param checkIds 已选id
     * @param isMoveAll 是否全部列表添加
     */
    function addRightToLeft(leftObj,rightObj,checkIdsObj,isMoveAll){
	    	
        var jtml = "";
        var temp_checkIds = ","+checkIdsObj.val()+",";
        if(isMoveAll){
            leftObj.find("input[name='checkbox']").prop("checked",true);
        }
        leftObj.find("input[name='checkbox']:checked").each(function(){
            if(temp_checkIds.indexOf(","+this.value+",") == -1){
                var text =  $("#span_"+this.value).text();
                if(text.length > 15){
                    text = text.substr(0,15)+"...";
                }
                jtml+="<li id='"+this.value+"' value='"+this.value+"'>"+text+"<a href=\"javascript:deleteLi('"+rightObj.attr("id")+"','"+leftObj.attr("id")+"','"+checkIdsObj.attr("id")+"','"+this.value+"');\">x</a></li>";
              
                temp_checkIds += this.value+",";


            }
        }) ;
        rightObj.append(jtml);
        checkIdsObj.attr("value",temp_checkIds.substr(1,temp_checkIds.length-2));
    }
 
    /**
     * @param rightObj
     * @param checkIdsObj
     * @param isMoveAll
     *///'slt_UserList_check','slt_UserList','slt_UserList_checkIds'
    function removeLeftAll(rightObjId,leftObjId,checkIdsId){
    
        $("#"+rightObjId).empty();
        $("#"+leftObjId).find("input[name='checkbox']").prop("checked",false);
        $("#"+checkIdsId).attr("value","");
    }
 
    /**
    *
    * @param rightObjId
    * @param liId
    */
    function deleteLi(rightObjId,leftObjId,checkIdsId,liId){
        $("#"+checkIdsId).val($("#"+checkIdsId).val().replace(","+liId, ""));
        $("#"+leftObjId).find("input[name='checkbox'][value='"+liId+"']").prop("checked",false);
        $("#"+rightObjId+" li[id='"+liId+"'] ").remove();
    }




    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
	
	//提交内容
    function doSubmit(){


        if(check()){
            alert('用户列表、公告标题都不能为空！');
        }else if(editor.isEmpty()){
            alert('公告内容不能为空！');
        }else{
        	
  
        	
        	
        	  $.ajax({
        	      type: 'POST',
        	      url: '<%=request.getContextPath()%>/post/addPostAction',//用户请求数据的URL
        	      data :$('#form1').serialize(),
        	      error: function (XMLHttpRequest, textStatus, errorThrown) {
        	          alert(textStatus);
        	       },
        	      success: function (v) {
        	      	  if(v=='1'){
        	      		  alert("发布成功");
        	      		window.location.href="<%=request.getContextPath()%>/post";
        	      	  }else{
        	      		  alert("发布失败，请重试..");
        	      	  }
        	      }
        	   });
        }
    }
	
	
	
    function check(){
        var title = $('#title').val();
        var ids = $("#slt_UserList_checkIds").val() ;
        
        
        
        


        if(title!=null && title !="" && ids!=null && ids !="") {
            return false;
        }else{
            return true;
        }
    }
	
	
	
	
	
	
	
	
	
	
    
    
    
	
	//callBack
	 function  callBack(){
		  window.location.href="<%=request.getContextPath()%>/post";
	}


</script>






</head>


<body>
<div id="contents">
	<div class="contentR">




<form id="form1" name="form1" action="${pageContext.request.contextPath}/post/addPostAction" method="post">


    <div class="contwrap" id="management" style="padding-top: 10px;">
        <div class="wrapL info" style="width: 99%">
            <div class="news">
                <table width="100%">
                    <tbody>
                    <tr class="tr1">
                        <td class="td1">公告</td>
                        <td class="td2">
                            <span><input type="radio" value="1" name ="open_closed" id = "open" checked="checked" />开启</span>
                            <span style="margin-left:10px;"><input type="radio" name ="open_closed" id= "closed" value="0" />关闭</span>
                        </td>
                    </tr>
                    <tr class="tr1">
                        <td class="td1">公告范围</td>
                        <td class="td2">
                            <div style="display: inline;">
                               
                                <span id="span_channelList_store">渠道列表：
                                <c:choose>
                                <c:when test="${size==3}">
                                <select id="slt_channelList_store"  name="slt_channelList_store" >
                                <option value="-1">请选择</option>
                                <option value="4">全渠道</option>
                                  <c:forEach var="item" items="${channelAll}" > 
                                  <option value="${item.channelAll}">${item.channelTypeName}</option>
                                 </c:forEach>
                                </select> 
                                </c:when>
                                <c:otherwise>
                                 <select id="slt_channelList_store"  name="slt_channelList_store">
                                <option value="-1">请选择</option>
                                  <c:forEach var="item" items="${channelAll}" > 
                                  <option value="${item.channelAll}">${item.channelTypeName}</option>
                                 </c:forEach>
                                </select> 
                                </c:otherwise>
                                </c:choose>
                                 &nbsp; </span>
                               <span id="spanagentListstore" name="spanagentListstore" style="display:none;">代理商列表：<select id="sltagentListstore" name="sltagentListstore"><option value="-1">请选择</option></select>  &nbsp;  </span>
                               <span id="spanareaListstore" style="display:none;">区局列表：<select id="sltareaListstore" name="sltareaListstore"><option value="-1">请选择</option></select>  &nbsp;  </span>
                               <span id="spansubAreaListstore" style="display:none;">分局列表：<select id="sltsubAreaListstore" name="sltsubAreaListstore"><option value="-1">请选择</option></select>  &nbsp;  </span>
                            </div>
                            <br/>
                            <div>
                                <ul class="bd_x1">
                                    <li>人员列表：</li>
                                    <li class="zy">	
                                        <ul class="new_info" id="slt_UserList"></ul>
                                    </li>
                                    <li class="zj">
                                        <a style="color:#fff; " class="btn_25" href="javascript:void(0);" οnclick="addUserList(true);">添加全部</a>
                                        <a style="color:#fff; margin-top:15px; " class="btn_25" href="javascript:void(0);" οnclick="addUserList(false);">&gt;&gt;</a>
                                        <a style="color:#fff; margin-top:15px; " class="btn_25" href="javascript:removeLeftAll('slt_UserList_check','slt_UserList','slt_UserList_checkIds');">全部删除</a>
                                        <input type="hidden" name="slt_UserList_checkIds" id="slt_UserList_checkIds"/>
                                    </li>
                                    <li class="zy">
                                        <ul class="new_info" id="slt_UserList_check">
                                        </ul>
                                    </li>
                                </ul>
                                <br/>
                            </div>
                        </td>


                    </tr>
                    <tr class="tr1">
                        <td class="td1">公告标题<i style="color:#f00;">*</i></td>
                        <td class="td2">
                            <input class="tx_1"  type="text" id="title" name="title"> </input>
                        </td>
                    </tr>
                    <tr class="tr1">
                        <td class="td1">起始日期 - 结束日期</td>
                        <td class="td2">
                            <div class="input_tx" style="border:0px">
                                <input  class="Wdate" id="starttime" name = "starttime"  onClick="WdatePicker()" type="text"/>
                                <%--<i title="选择时间">选择时间</i>--%>
                            </div>
                            <div class="gang">-</div>
                            <div class="input_tx" style="border:0px">
                                <input   class= "Wdate" id="endtime" name = "endtime" onClick="WdatePicker()" type="text"/>
                                <%--<i title="选择时间">选择时间</i>--%>
                            </div>
                            <p class="help">格式:(YYYY-MM-DD，如:1983-12-20)<br/>
                                起始时间:公告开始发布的时间，留空则使用当前时间<br/>
                                结束时间:公告结束发布的时间，留空则公告不结束
                            </p>
                        </td>
                    </tr>
                    <tr class="tr1">
                        <td class="td1">显示顺序</td>
                        <td class="td2">
                            <select id="sequence" name="sequence">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                            </select>
                            <p class="help">值越小排序越靠前<br/>
                        </td>
                    </tr>


                    <tr class="tr1">
                        <td class="td1">公告内容</td>


                        <td class="td2">
                          <textarea id="editor_id" name="content" style="width:700px;height:300px;"></textarea>
                            <p>附件最大支持20M,仅支持音频wmv、视频mp4播放<p>
                           
                        </td>
                    </tr>


                    <tr class="">
                        <td class=""></td>
                        <td class="">
                         
                          
	
	<div class="fb">
                            <p style="display:block; overflow:hidden; float:left; margin-top:10px; width:100%;">  
     
                              <a style="color:#fff; " class="but_30" href="#" title="确认" οnclick="doSubmit();">确认</a>
                                <a style="color:#333; " class="but_30 but_30_1" href="#" title="返回" οnclick="callBack();">返回</a>
     
                                </p>
                                </div>
                        
                              
                            <!--  </div>--> 
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>


    </div>


</form>




<%--<script type="text/javascript">--%>


<%--var ue = UE.getEditor('editor');--%>


<%--</script>--%>


</div>
</div>


</body>


</html>
friedaZiruominglin
关注
wpf实现带checkbox层级联动的树形菜单
07-07
在本文中，我们将深入探讨如何使用WPF（Windows Presentation Foundation）来实现一个具有复选框的层级联动树形菜单。这个功能丰富的菜单不仅允许用户通过右键操作进行展开、关闭、选择和反选所有节点，而且在选择...
checkbox 多级状态联动选择
hoyche的博客
05-25 5906
// 需要配合html设置特定属性 // rechild是指定它的下一级 // resibling是指定它的同级 // reparent是指定它的上一级 // 思路就是当前元素触发事件之后，先循环设置子级，子级还存在子级就继续循环下去，直到没有子级 // 之后循环同级，通过循环同级确定父级的选择状态 // 在通过父级的同级确定父级的父级的选择状态，直到没有父级 $(":checkbox").cha...
多级checkBox联动
kangqiang1998的博客
04-30 299
多级checkBox联动 <template> <div></div> </template> <script> // subList: [ // { // code:'a11', // } // ] export default { data(){ return {
Jquery实现Checkbox三级联动
5653325的专栏
01-21 4498
一、测试的数据（JSON格式，用存储过程生成的） [{"count":16,"list":[{"MenuID":3,"MenuName":"信息管理","MenuCode":"msg","MenuCount":2,"MenuList":[{"MenuID":4,"MenuName":"信息发布","MenuCode":"msg_publis"},{"MenuID":5,"MenuName":"信
el-checkbox 三级联动实现，有图有数据
不想起床
01-14 1151
el-checkbox 三级联动实现，一层数据结构和两层数据结构的同步选中取消 效果图 点击获取数据，即可获取当前选中所有的id 代码 <template> <div style="display: flex"> <div> <el-checkbox v-model="AllChecked" @change="allHandle">全选</el-checkbox> <div v-for="(item, i
有手就行系列——复选框的联动
qq_35370002的博客
04-07 971
页面布局 功能分析 勾选框的联动是实现全选框与下面的勾选框联动，联动情况有很多种： 全选按钮勾选时，若取消勾选下面任意一个商店的checkbox，全选按钮则取消 全选按钮勾选时，若取消勾选下面任意一个商店中商品的checkbox，全选按钮则取消 商店的全选按钮处于未选中状态时，当该商店下商品全部勾选时，该商店全选按钮改为选中状态 该商店的全选按钮选中状态改变时，该商店下的所有按钮也应改变对应的选中状态 该商店的全选按钮处于选中状态时，若该商店下有任意一个商品取消勾选状态，则该商店的
带checkbox的树型菜单
07-16
这个功能允许用户通过复选框来选择和操作菜单项，同时还支持全选和反选，以及在多级菜单中联动处理子菜单的选择状态。 1. **Checkbox（复选框）**: 复选框是用户界面中一种基本的输入控件，它允许用户在多个选项中...
checkbox二级联动-亲测有效
04-28
本案例中的"checkbox复选框"就是这样一个应用场景，通过JavaScript或者jQuery来实现复选框之间的联动效果。 首先，我们来看"checkbox复选框"的基本概念。复选框（Checkbox）是HTML中的一种表单元素，用户可以用来...
jQuery三级联动菜单选中赋值代码.zip
07-04
本项目“jQuery三级联动菜单选中赋值代码”是针对网页交互设计的一个实例，主要实现了在input文本框中点击后弹出一个三级联动菜单的功能。这个菜单不仅支持单选，还支持多选，并且选中的菜单项会自动赋值到输入框，...
CheckBox分级选中 复选框 上下级 联动
04-09
在IT行业中，尤其是在前端开发领域，"CheckBox分级选中 复选框 上下级 联动"是一个常见的功能需求，通常应用于具有层级结构的数据展示和交互场景，比如树形菜单、组织架构选择等。这个功能的核心是实现复选框...
checkbox联动选择
12-10
复选框联动， 选中某一个节点，该节点的所有子节点均置为选中，该节点的所有父节点均置为选中
js多级联动多选checkbox插件
08-10
js多级联动多选checkbox插件
jquery checkbox 二级联动
11-11
仅供学习，有兴趣可以看看，高手勿入。代码很简单的。
经典三级菜单树含复选框
08-03
经典三级菜单树含复选框。当点击父类时子类全选。。等等
html下拉复选框联动,HTML : CheckBox 复选框成组联动(JavaScript)
weixin_39900180的博客
06-03 1303
在页面中，经常需要控制一组 CheckBox 的选中状态，常用的操作有：1.通过一个或者多个复选框来控制一组 CheckBox 的选中状态。2.根据一组 CheckBox 的选中状态来决定某些控件的状态。如：一组 CheckBox 中，至少有一项被选中，某个按钮才可以被点击，否则按钮处于灰色状态，不可点击。一组 CheckBox 中，至少有一项被选中，某个文本框才可以输入内容，否则文本框处于失效状...
vue checkbox多级联动
weixin_41463944的博客
05-29 973
<template> <div class="deliverySetting"> <div class="deliverySetting-table"> <div class="table-head"> <div class="selection"> <el-checkbox v-model="ischeckAll" :indeterminate="indeterminate" @c
多级 checkbox 父子类关联勾选
团子窝
09-07 5281
场景 设定用户组的时候需要勾选节点，多级节点的情况很多 解决 jq使用 1.6 左右的。 jqery.checktree.js ; (function (win, doc, $) { $.fn.extend({ checktree : function () { this.click(function (evt) { var evtEle = $(evt.
三级联动checkbox 选中
Zoe_Wang_ing的专栏
11-19 5039
Blank Page - Ace Admin .listbox{width:100%; border:1px solid #ccc; overflow: hidden; margin-bottom:5px;} .listleft{float: left;border-right:1px solid #ccc;width:200px;padding:5px 1
checkbox三级联动效果
神zhi殇的博客
06-15 618
参考： 1.vue项目中的实现：https://www.cnblogs.com/yuanyiming/p/10745001.html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值