JavaScript常用功能

最新推荐文章于 2021-06-24 15:03:16 发布

无始天尊

最新推荐文章于 2021-06-24 15:03:16 发布

阅读量295

点赞数

分类专栏： JavaScript 文章标签： jquery html js checkbox ajax

本文链接：https://blog.csdn.net/qq_43059621/article/details/105588813

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

目录:
1.实现全选全不选
2.使用js获取被选中的复选框
3.在jsp实现页面跳转
4.使用ajax请求发送序列化表单
5.实现简单弹窗

1.实现全选全不选

function selectAll(obj) {
    $(".checkbox").attr("checked",obj.checked);
}
//后面的复选框要使用相同的类名
<th><input type="checkbox" id="checkbox" onclick="selectAll(this);"></th>
<td><input type="checkbox" class="checkbox" name="check"></td>

2.使用js获取被选中的复选框

function Check() {
   var Tabobj = $("#Tab");
    var Check = $("table input[type=checkbox]:checked");//在table中找input下类型为checkbox属性为选中状态的数据
    var ids = [];
    var ttt = [];
    Check.each(function () {//遍历
        var row = $(this).parent("td").parent("tr");//获取选中行
        console.log(row);
        var id = row.find("[name='Sid']").html();//获取name='Sid'的值
        ttt.push(id);
        //var sname = row.find("[name='Sname']").html();
    })
    ttt.shift();
    ids = ttt.map(Number);  //把字符串集合转为数字集合
    console.log(ids);
    //ajax传数组到后台，后台springmvc接收数组参数
    $.ajax({
        type:'get',
        url:'/class/selectDelectClass',
        data:{ids:ids}
    });
}

//后台代码
@ResponseBody
public void deleteByClassId(@RequestParam(name = "ids[]") Integer[] ids){
    classService.deleteByClassId(ids);
}

3.在jsp实现页面跳转

<jsp:forward page="/class/findAll"></jsp:forward>

4.使用ajax请求发送序列化表单

$.ajax({
   type:'POST',
   //后台使用springMVC直接用对应的对象接收
    url:'/class/saveClass',	
    data:$("#classAdd").serialize(),
    success:function () {
        window.location.reload();
        $("#result").html("增加成功");
    }
});

5.实现简单弹窗

<html>
<head>
    <meta charset="utf-8">
    <title>My Test Document</title>

    <style>
        .box{
            width:50%; margin-top:10%; margin:auto; padding:28px;
            height:350px; border:1px #111 solid;
            display:none;            /* 默认对话框隐藏 */
        }
        .box.show{display:block;}
        .box .x{ font-size:18px; text-align:right; display:block;}
        .box input{width:80%; font-size:18px; margin-top:18px;}
    </style>
</head>
<body>

<h2>测试</h2>
<input type="button" onClick="msgbox(1)" value="点击弹出输入框">

<script>
    function msgbox(n){
        document.getElementById('inputbox').style.display=n?'block':'none';     /* 点击按钮打开/关闭 对话框 */
    }
</script>

<div id='inputbox' class="box">
    <a class='x' href=''; onclick="msgbox(0); return false;">关闭</a>
    <input type="text">
    <input type="text">
    <input type="button" value="确定">
</div>
</body>
</html>