jquery表单ajax提交以及checkbox全选/全不选

JQuery实现Ajax表单提交与Checkbox全选/全不选

最新推荐文章于 2022-09-13 11:33:51 发布

原创最新推荐文章于 2022-09-13 11:33:51 发布 · 3.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #jquery #action #function #input #json

js 专栏收录该内容

14 篇文章

订阅专栏

这篇博客介绍了如何使用JQuery实现checkbox的全选和全不选功能，并通过示例代码展示了利用ajax进行表单提交的步骤。全选/全不选功能通过监听复选框的点击事件实现，而表单则是通过jQuery的ajaxSubmit方法以POST方式发送到指定的action处理，返回JSON数据。

1.checkbox全选/全不选

//JQuery一句话搞定全选/全不选
$(document).ready(function() {
    $("#all").click(function() {
        $("input[name='serialNumbercheck']").attr("checked", $("input[id='all']").attr("checked"));
    });
})
//注:all是全选的那个复选框的ID,serialNumbercheck是多个复选框的名字.

2.jquery表单ajax提交

a.<script type="text/javascript" src="<s:url value="/jquery/jquery.form.js"/>" ></script>

b.<s:form id="testCaseForm_0_" method="post" action="ajax/saveObject.html"> </s:form>

c.var options = { dataType:"json", url:"ajax/saveObject.html" , type:"post" };

$('#testCaseForm_0_').ajaxSubmit( options );

d. <action name="saveObject" class="cn.shaviation.common.webapp.action.AssociationBaseAction" method="saveTarget">

            <result name="success" type="json">
                <param name="root">result</param>
            </result>
    </action>