AsiaDIT 2021-10-08 20:58 采纳率: 42.9%
浏览 50
已结题

jQuery通过if判断语句操作表单，实现交互？ if语句判断选中状态，实现交互的逻辑是怎样的？

通过jQuery和JS实现如下描述的交互功能（最好是jQuery）：
1.选中input 多选框里的一个或多个选项，
2.点击提交按钮
3.选中的选项以“默认项目1000”的样式呈现在上面

img

具体的代码如下：


```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>
  • 写回答

1条回答 默认 最新

  • 广大菜鸟 2021-10-09 02:40
    关注
    
<!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>

    img

    img

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 10月17日
  • 已采纳回答 10月9日
  • 创建了问题 10月8日

悬赏问题

  • ¥20 搭建pt1000三线制高精度测温电路
  • ¥15 使用Jdk8自带的算法，和Jdk11自带的加密结果会一样吗，不一样的话有什么解决方案，Jdk不能升级的情况
  • ¥15 画两个图 python或R
  • ¥15 在线请求openmv与pixhawk 实现实时目标跟踪的具体通讯方法
  • ¥15 八路抢答器设计出现故障
  • ¥15 opencv 无法读取视频
  • ¥15 用matlab 实现通信仿真
  • ¥15 按键修改电子时钟，C51单片机
  • ¥60 Java中实现如何实现张量类，并用于图像处理(不运用其他科学计算库和图像处理库）)
  • ¥20 5037端口被adb自己占了