使用IDEA学习JSP代码第022课

最新推荐文章于 2023-11-22 10:39:52 发布

虾米大王

最新推荐文章于 2023-11-22 10:39:52 发布

阅读量87

点赞数

分类专栏： Java 文章标签： intellij-idea 学习 bootstrap

本文链接：https://blog.csdn.net/modern358/article/details/125192940

版权

Java 专栏收录该内容

1267 篇文章 4 订阅

订阅专栏

new381.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap + jsp 的使用</title>
    <link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
    <script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
    <script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(function () {

            //全选按钮
            $("#select01").click(function () {
               $(":checkbox").prop("checked",true);
            });

            //全不选按钮
            $("#select02").click(function () {
                $(":checkbox").prop("checked",false);
            });

            //反选按钮
            $("#select03").click(function () {
               $(":checkbox[name='sport']").each(function () {
                   this.checked = !this.checked;
               });

               var allCount = $(":checkbox[name='sport']").length;
               var checkCount = $(":checkbox[name='sport']:checked").length;
               if(allCount == checkCount)
               {
                   $("#check01").prop("checked",true);
               }
               else
               {
                   $("#check01").prop("checked",false);
               }
            });

            //单击全选全不选时，勾选球类
            $("#btn01").click(function () {
               $(":checkbox[name='sport']:checked").each(function () {
                   alert(this.value);
               });
            });

            //全选全不选框
            $("#check01").click(function () {
                $(":checkbox[name='sport']").prop("checked",this.checked);
            });

            //每个多选点击时判断
            $(":checkbox[name='sport']").click(function () {
                var allCount = $(":checkbox[name='sport']").length;
                var checkCount = $(":checkbox[name='sport']:checked").length;
                if(allCount == checkCount)
                {
                    $("#check01").prop("checked",true);
                }
                else
                {
                    $("#check01").prop("checked",false);
                }
            });
        });
    </script>

</head>
<body>
    你喜欢的运动有哪些？
    <input type="checkbox" id="check01" value="">全选/全不选<br>
    <input type="checkbox" name="sport" id="check02" value="足球">足球
    <input type="checkbox" name="sport" id="check03" value="篮球">篮球
    <input type="checkbox" name="sport" id="check04" value="羽毛球">羽毛球
    <input type="checkbox" name="sport" id="check05" value="冰球">冰球
    <br>
    <br>
    <button id="select01" class="btn btn-primary">全选</button>
    <button id="select02" class="btn btn-primary">全不选</button>
    <button id="select03" class="btn btn-primary">反选</button>
    <button id="btn01" class="btn btn-primary">提交</button>
</body>
</html>

new382.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap + jsp 的使用</title>
    <link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
    <script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
    <script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(function () {

           //
           $("button:eq(0)").click(function () {
                $("select:eq(0) option:selected").appendTo($("select:eq(1)"));
            });

           //
           $("button").eq(1).click(function () {
               $("select:eq(0) option").appendTo($("select").eq(1));
           })

            //
            $("button:eq(2)").click(function () {
                $("select:eq(1) option:selected").appendTo($("select:eq(0)"));
            });

            //
            $("button").eq(3).click(function () {
                $("select:eq(1) option").appendTo($("select").eq(0));
            })


        });
    </script>


</head>
<body>
<div class="container">
    <div class="col-md-6">
        <select multiple="multiple" style="width: 100px;height: 250px;" name="sel01" id="sel01">
            <option value="op1">选项1</option>
            <option value="op2">选项2</option>
            <option value="op3">选项3</option>
            <option value="op4">选项4</option>
            <option value="op5">选项5</option>
            <option value="op6">选项6</option>
            <option value="op7">选项7</option>
            <option value="op8">选项8</option>
            <option value="op9">选项9</option>
            <option value="op10">选项10</option>
        </select>
        <br>
        <button id="btn01" class="btn btn-primary">添加到右边</button><br><br>
        <button id="btn02" class="btn btn-primary">全部添加到右边</button>
    </div>
    <div class="col-md-6">
        <select multiple="multiple" style="width: 100px;height: 250px;" name="sel02" id="sel02">

        </select>
        <br>
        <button id="btn03" class="btn btn-primary">删除选中的</button><br><br>
        <button id="btn04" class="btn btn-primary">全部删除</button>
    </div>
</div>
</body>
</html>