jQuery通过if判断语句操作表单，实现交互？ if语句判断选中状态，实现交互的逻辑是怎样的？
通过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>
<!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> -->
<script src="F:\html-workplace\js-sdk\jquery-3.6.0.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 id="choosePlace">
</div>
<div class="projectplace">
<div>您可以选择以下项目：</div>
<form action="">
<input class="project" type="checkbox" name="project1">条目1<span></span>
<input class="project" type="checkbox" name="project2">条目2<span></span>
<input class="project" type="checkbox" name="project3">条目3<span></span>
<input class="project" type="checkbox" name="project4">条目4<span></span>
<input class="project" type="checkbox" name="project5">条目5<span></span>
<input class="project" type="checkbox" name="project6">条目6<span></span>
<input class="project" type="checkbox" name="project7">条目7<span></span>
<input class="project" type="checkbox" name="project8">条目8<span></span>
<span></span><span></span>
<input id="9" type="submit" onclick="a();" name="project" valve="确定"><span></span>
</form>
</div>
</div>
<script>
function deleteFatherElement(obj) {
var r = obj.parentNode.childNodes[0].innerText;
var retunValue = r.substring(2,r.length);
$('input[name=' + retunValue + ']').prop('checked', false);
obj.parentNode.parentNode.removeChild(obj.parentNode);
}
</script>
<script>
$(document).ready(function () {
console.log(window.location.href);
var paraObj = {}
var urlStr = location.href;
var paraString = urlStr.substring(urlStr.indexOf("?") + 1, urlStr.length).split("&");
if (paraString.length > 1) {
var boardDiv = " 您的选择是：";
$("#choosePlace").append(boardDiv);
}
for (let i = 0; i < paraString.length - 1; i++) {
var tmp = paraString[i];
var returnValue = tmp.substring(0, tmp.indexOf("="));
$('input[name=' + returnValue + ']').prop('checked', true);
var boardDiv = "<div class='mamu'><span class='yourchoice'>默认" + returnValue + "</span>\
<span onclick='deleteFatherElement(this)' class='clean'>关闭</span></div>";
$("#choosePlace").append(boardDiv);
}
});
</script>
<script>
var lst = document.getElementsByClassName("project");
// form 最后个为 button的时候可以查看
function a() {
for (var i = 0; i < i < lst.length; i++) {
if (lst[i].checked) {
console.log(lst[i].value + " " + lst[i].nextSibling.nodeValue);
}
}
}
</script>
</body>
</html>
