动态添加多选框生成标签元素demo
演示效果如图
经理需求可能项目需要一个，点击单选框，根据选项，弹出响应的多选框。选择多选框 在文本域中添加标签元素。捣鼓了半天如下
<%--
Created by IntelliJ IDEA.
User: 24803
Date: 2019/12/27
Time: 10:11
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script src="${pageContext.request.contextPath }/js/jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
<html>
<head>
<meta charset="utf-8" />
<title>复选框</title>
<style type="text/css">
</style>
</head>
<body>
<form action="" method="post">
<input type="radio" id="boy" name="Sex" value="男生" onclick="ShowBoy()"/>男生
<input type="radio" id="girl" name="Sex" value="女生" onclick="ShowGirl()"/>女生
<br/>
<div hidden id="Hobby">
<input id="PlayGame" type="checkbox" name="hobby_1" onclick="Show(this)"/>打游戏
<input id="GoStudy" type="checkbox" name="hobby_2" onclick="Show(this)"/>学习
<input id="GoDaze" type="checkbox" name="hobby_3" onclick="Show(this)"/>打酱油
</div>
<div hidden id="Cosmetics">
<input type="checkbox" id="Foundation" name="Foundation" onclick="Show(this)"/>粉底
<input type="checkbox" id="Eyeshadow" name="Eyeshadow" onclick="Show(this)"/>眼影
<input type="checkbox" id="Lipstick" name="Lipstick" onclick="Show(this)"/>口红
</div>
<div hidden id="lipstick1">
<input type="checkbox" id="lipstick1" name="lipstick1" onclick="CreateTags(this)" value="YSL"/>YSL
<input type="checkbox" id="lipstick2" name="lipstick1" onclick="CreateTags(this)" value="Dior"/>Dior
</div>
<div hidden id="foundation1">
<input type="checkbox" id="found1" name="foundation1" onclick="CreateTags(this)" value="M.A.C studio fix foundation"/>M.A.C studio fix foundation
<input type="checkbox" id="found2" name="foundation2" onclick="CreateTags(this)" value="ysl超模粉底液"/>ysl超模粉底液
<input type="checkbox" id="found3" name="foundation3" onclick="CreateTags(this)" value="完美意境粉底液"/>完美意境粉底液
</div>
<div hidden id="eyeshadow1">
<input type="checkbox" id="eyeshadow1" name="eyeshadow1" onclick="CreateTags(this)" value="LBR #1912 TITANIC盘"/>LBR #1912 TITANIC盘
<input type="checkbox" id="eyeshadow2" name="eyeshadow2" onclick="CreateTags(this)" value="colorpop #yes please"/>colorpop #yes please
<input type="checkbox" id="eyeshadow3" name="eyeshadow3" onclick="CreateTags(this)" value="Venus Marble"/>Venus Marble
</div>
<div hidden id="playgame1">
<input type="checkbox" id="game1" name="game1" onclick="CreateTags(this)" value="炉石传说"/>炉石传说
<input type="checkbox" id="game2" name="game2" onclick="CreateTags(this)" value="Dota2"/>Dota2
<input type="checkbox" id="game3" name="game3" onclick="CreateTags(this)" value="LOL"/>LOL
</div>
<div hidden id="gostudy1">
<input type="checkbox" id="study1" name="study1" onclick="CreateTags(this)" value="Jquery" />Jquery
<input type="checkbox" id="study2" name="study2" onclick="CreateTags(this)" value="数据结构"/>数据结构
<input type="checkbox" id="study3" name="study3" onclick="CreateTags(this)" value="Java编程" />Java编程
</div>
<div hidden id="godaze1">
<input type="checkbox" name="daze" id="daze1" onclick="CreateTags(this)" value="睡觉"/>睡觉
<input type="checkbox" name="daze" id="daze2" onclick="CreateTags(this)" value="发呆"/>发呆
<input type="checkbox" name="daze" id="daze3" onclick="CreateTags(this)" value="思考人生"/>思考人生
</div>
<!--标签控制的测试 -->
<input hidden name="tags" id="tags" value="" />
<button type="button" onclick="doIt()">提交
<br/>
</form>
</body>
<script>
function doIt(){
var StringTag=$('#tags').val();
var Stringnew = StringTag.replace(/,/g,";");//逗号全都换分号返回
alert(Stringnew);
}
function ShowBoy(){
$("#Hobby").show();//显示
$("div[id!='Hobby']").hide();//隐藏全部的男生组选项框
$("input[id!='boy']").prop("checked",false);
$('#tags').importTags('');//重置标签组
}
function ShowGirl(){
$("#Cosmetics").show();//显示
$("div[id!='Cosmetics']").hide();//隐藏全部的男生组选项框
$('#tags').importTags('');//重置标签组
}
//二级目录的复用，给隐藏的div标签统一命名规则，即可每个点击事件走自己的流程。
function Show(selectname){
var isChecked = $(selectname).prop('checked');
var Nextlevel ='#'+$(selectname).prop('id').toLocaleLowerCase()+"1";
if(isChecked){
$(Nextlevel).show();//显示
}
else{
$(Nextlevel).hide();
}
}
function CreateTags(selectname){
//$('#tags').addTag('foo'); //添加标签
//$('#tags').removeTag('bar');//删除标签
$('#tags_tagsinput').css('display','block');//这步必须，在男女切换的时候插件默认会将display属性置为none
//$('#tags').tagsInput();
var isChecked = $(selectname).prop('checked');//判断多选框是否被选中，若为true才打印标签，false删除标签
if(isChecked==true){
var x=$(selectname).val(); //点击项的值
var tagvalue=$('#tags').val();
if(tagvalue==""){
tagvalue=x;
$('#tags').addTag(x);//添加标签
}
else{
//tagvalue+=","+x; //至少已经有一个标签
$('#tags').addTag(x);//添加标签
}
$('#tags').attr("value",tagvalue);
}
else {//多选框置为false
var xdel=$(selectname).val(); //点击项的值
$('#tags').removeTag(xdel);//else时多选框未选中，删除标签
}
$('#tags').tagsInput({
'interactive':false,
'removeWithBackspace' : false
});
}
</script>
</html>
使用需要自己导入jquery.tagsinput.js
function Show(selectname){}
用于复用按选择的多选框弹出对应的多选框
function CreateTags(selectname){}
点击事件对标签的添加与修改，所有三级选择框都调用此方法。
716
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
