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 keepalive配置业务服务双机单活的方法。业务服务一定是要双机单活的方式
  • ¥50 关于多次提交POST数据后,无法获取到POST数据参数的问题
  • ¥15 win10,这种情况怎么办
  • ¥15 如何在配置使用Prettier的VSCode中通过Better Align插件来对齐等式?(相关搜索:格式化)
  • ¥100 在连接内网VPN时,如何同时保持互联网连接
  • ¥15 MATLAB中使用parfor,矩阵Removal的有效索引在parfor循环中受限制
  • ¥20 Win 10 LTSC 1809版本如何无损提升到20H1版本
  • ¥50 win10 LTSC 虚拟键盘不弹出
  • ¥30 微信小程序请求失败,网页能正常带锁访问
  • ¥15 Matlab求解微分方程,如何用fish2d进行预优?