javaScript基础

最新推荐文章于 2021-09-06 18:51:00 发布

原创最新推荐文章于 2021-09-06 18:51:00 发布 · 294 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个简单的实现全选复选框功能的方法，并通过JavaScript实现了AJAX提交表单的功能。文章包含了HTML与JavaScript代码示例，展示了如何在用户界面上使用全选按钮控制多个复选框的状态，并通过AJAX向后端发送表单数据。

实现简单的复选框，全部选中和全部取消

<input type="checkbox" name="all" id="allcheck" onclick="checkAll()"/>全选<br/>
<input type="checkbox" name="check" value="1"><br>
<input type="checkbox" name="check" value="2"><br>
<input type="checkbox" name="check" value="3"><br>

<button type="button" onclick="mycheck()">检查</button>
<script>
    function checkAll() {
        var all = document.getElementById("allcheck");
        var one = document.getElementsByName('check');
        for (var i = 0; i < one.length; i++) {
            one[i].checked = all.checked;
        }
    }
</script>

ajax提交表单

<form id="duan">
    <input id="dat1" type="text" name="articleTitle">
    <input id="dat2" type="text" name="category">
    <input type="button" value="提交" onclick="mytest()">
</form>
<script>
    function mytest() {
        var formData = new Object();
        formData.category = document.getElementById("dat1").value;
        formData.articleTitle=document.getElementById("dat2").value;
        $.ajax({
            url:"/test",
            type:"post",
            data:formData
        });
    }
</script>

后端代码：

    @RequestMapping("/test")
    public String test(Article article){
        System.out.println(article.getArticleTitle());
        System.out.println(article.getCategory());
        return "";
    }