通过jQuery和JS实现如下描述的交互功能(最好是jQuery):
1.选中input 多选框里的一个或多个选项,
2.点击提交按钮
3.选中的选项以“默认项目1000”的样式呈现在上面
具体的代码如下:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作交互动效</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
.showplace,.projectplace{
width:90%;
border:1px solid #ccc;
padding:20px;
box-sizing: border-box;
margin:0 auto;
}
.projectplace input,span{
margin-top: 10px;
}
.projectplace span{
width:40px;
margin-left: 20px;
}.yourchoice{
background-color: #fff;
border: 1px solid #ccc;
border-right:0px solid #ccc;
line-height: 20px;
padding:2px;
cursor: pointer;
}
.clean{
background-image: url(img/close.png);
background-repeat: no-repeat;
background-position: left center;
border: 1px solid #ccc;
border-left:0px solid #ccc;
width:20px;
height:20px;
line-height: 20px;
padding:2px;
cursor: pointer;
}
.mamu{
display:inline-block;
margin-right: 40px;
}
</style>
</head>
<body>
<diV class="showplace">
您的选择是:<div class="mamu" ><span class="yourchoice">默认条目1000</span><span class="clean">关闭</span></div>
<div class="mamu" ><span class="yourchoice">默认条目2000</span><span class="clean">关闭</span></div>
</diV>
<div class="projectplace">
<div>您可以选择以下项目:</div>
<form action="">
<input type="checkbox" name="project" valve="条目1">条目1<span></span>
<input type="checkbox" name="project" valve="条目2">条目2<span></span>
<input type="checkbox" name="project" valve="条目3">条目3<span></span>
<input type="checkbox" name="project" valve="条目4">条目4<span></span>
<input type="checkbox" name="project" valve="条目5">条目5<span></span>
<input type="checkbox" name="project" valve="条目6">条目6<span></span>
<input type="checkbox" name="project" valve="条目7">条目7<span></span>
<input type="checkbox" name="project" valve="条目8">条目8<span></span><span></span><span></span>
<input type="submit" name="project" valve="确定"><span></span>
</form>
</div>
<script>
$(document).ready(function(){
$(".clean").click(function(){
$(this).parent().remove();
});
});
</script>
</body>
</html>