1024programmer Java JavaScript multi-level checkbox selection effect_form special effects

JavaScript multi-level checkbox selection effect_form special effects

Today I finally figured out the effect of department multi-selection
See picture:

First share the core code:
1: js script

The code is as follows:


var treeHTML = “”;
var checkList = new Array(); /*only init here*/
var barString = “└”;/* ┝└*/
var degreeString = “ ”;
function makeTree(id,text,value,parentid,isCheck) {
this.id = id;
this.text = text;
this.value = value;
this.parentid = parentid;
this.isCheck=isCheck;
}
function dispCheck(option,degree) {
for (var i=1; i<=degree;i++) {
treeHTML += degreeString;
}
treeHTML += barString;
treeHTML += “”;
treeHTML += option.text+”
“;
}
function dispKidsByPid(pid,degree) {
for (var i=0;i<checkList.length ;i++) {
if (pid==checkList[i].parentid) {
dispCheck(checkList[i],degree);
dispKidsByPid(checkList[i].id,degree+1);
}
}
}
function checkOption(option)
{
var deptCheckList=document.getElementsByName(“deptOption”);
//Check the parent element
if(option.parentId!=0){
var parentChecked=”0″;
for(var i=0;i<deptCheckList.length;i++){
if(deptCheckList[i].parentId ==option.parentId){
if(deptCheckList[i].checked){
parentChecked=”1″;
break;
}
}
}
if (parentChecked==”1″)
document.getElementById(“dept_”+option.parentId).checked=true;
else
document.getElementById(“dept_”+option.parentId).checked= false;
checkOption(document.getElementById(“dept_”+option.parentId));
}
}
function checkSubOption(option){
var deptCheckList=document.getElementsByName(“deptOption “);
//Check child elements
for(var i=0;i<deptCheckList.length;i++){
if(“dept_”+deptCheckList[i].parentId==option.id ){
deptCheckList[i].checked=option.checked;
checkSubOption(deptCheckList[i]);
}
}
}

2: Page:

The code is as follows:











<%
SchoolRoleVo schoolRoleVo = (SchoolRoleVo) request.getAttribute(“schoolRoleVo”);
List subjecGgroupList = (List) request.getAttribute (“subjecGgroupList”);
List gradeGroupList = (List) request.getAttribute(“gradeGroupList”);
List deptList = (List) request.getAttribute(“deptList”);
List groupList = (List ) request.getAttribute(“groupList”);
String roleType=request.getParameter(“roleType”);
SchoolRolePrismsVo schoolRolePrismsVo=(SchoolRolePrismsVo)request.getAttribute(“schoolRolePrismsVo”);
%>
<input type="hidden" name="roleId" value="”/>


























Role name:
<input type="text" name="roleName" dataType=”LimitB” min=”1″ max=”50″ msg=”The role name cannot be empty, and the length cannot be greater than 25 Chinese characters” class=”input_style1 ” value=””/> *
Character description:
<textarea name="roleDesc" rows=”5″ cols=”50″ require=”false” datatype= “Limit” msg=”The role description must not exceed 128 Chinese characters” max=”255″>
Number of text messages allocated:
<input type="text" name="totalNum" require="false" datatype="Number" msg="The number of SMS messages allocated must be a number" class="input_style1" value=" “/>
There are still available for delivery
Sending range:





System Options



<input type="checkbox" name="sysOption" value="JS" >All teachers in the school

<input type="checkbox" name="sysOption" value="BZR" >Homeroom teacher

<input type="checkbox" name="sysOption" value="XS" >All students in the school

<input type= "checkbox" name="sysOption" value="JFRY" >Teaching and teaching staff of the whole school



Administrative Department





Subject grouping



<%
if(subjecGgroupList!=null&&!subjecGgroupList .isEmpty()){
for(int i=0;i<subjecGgroupList.size();i++){
MasSubjectVo masSubjectVo = (MasSubjectVo) subjecGgroupList.get(i);
%>
<input type="checkbox" name="subjectOption" value="” >

<%
}
}
%>



Grade group



<%
if(gradeGroupList!=null&&!gradeGroupList.isEmpty()){
for(int i=0;i<gradeGroupList.size();i++){
MasGradeVo masGradeVo = (MasGradeVo) gradeGroupList.get(i);
%>
<input type="checkbox" name="gradeOption" value="” >

<%
}
}
%>



Intra-school group



<%
if(groupList!=null&&! groupList.isEmpty()){
for(int i=0;i<groupList.size();i++){
OrgBgroupVo orgBgroupVo=(OrgBgroupVo)groupList.get(i);
%>
<input type="checkbox" name="groupOption" value="” >

<%
}
}
%>



Student grade



<%
if(gradeGroupList!=null&&!gradeGroupList.isEmpty()){
for(int i=0;i<gradeGroupList.size();i++){
MasGradeVo masGradeVo = (MasGradeVo) gradeGroupList.get(i);
%>
<input type="checkbox" name="studentOption" value="” >

<%
}
}
%>





3: css

The code is as follows:


li { list-style-type : none; }
.basic { width:20em; }
.basic {
width: 260px;
font-family: verdana;
border: 1px solid black;
}
.basic p {
background-color: #eee;
}
.basic p {
margin-bottom : 10px;
border: none;
text-decoration : none;
font-weight: bold;
font-size: 10px;
margin: 0px;
padding: 10px;
}
.basic a {
cursor :pointer;
display:block;
padding:5px;
margin-top: 0;
text-decoration: none;
font-weight: bold;
font-size : 12px;
color: black;
background-color: #00a0c6;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #999;
background-image : url(“AccordionTab0.gif”);
}
.basic a:hover {
background-color: white;
background-image: url(“AccordionTab2.gif”);
}
.basic a.selected {
color: black;
background-color: #80cfe2;
background-image: url(“AccordionTab2.gif”);
}
BR>background-color: #80cfe2;
background-image: url(“AccordionTab2.gif”);
}

This article is from the internet and does not represent1024programmerPosition, please indicate the source when reprinting:https://www.1024programmer.com/722284

author: admin

Previous article
Next article

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

Contact us

181-3619-1160

Online consultation: QQ交谈

E-mail: [email protected]

Working hours: Monday to Friday, 9:00-17:30, holidays off

Follow wechat
Scan wechat and follow us

Scan wechat and follow us

Follow Weibo
Back to top
首页
微信
电话
搜索