jQuery 获取checkbox选中的值form表单提交例子

最新推荐文章于 2023-11-06 08:00:00 发布
原创 最新推荐文章于 2023-11-06 08:00:00 发布 · 9k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个基于Java的Web应用中实现角色权限管理的方法。通过HTML和JavaScript实现了前端页面设计，利用JSP技术处理表单数据，并通过后台Java代码处理权限分配逻辑。详细展示了如何收集表单中的角色名和勾选的权限选项。

 前台页面

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<link rel="stylesheet" type="text/css" href="../Admin/role/css/index.css">
</head>
<script type="text/javascript" src="../Admin/role/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var zhi 
function addClick(){ 
$(document).ready(function(){
var idsstr = " ";
var zhi = " ";
$(".mian_b_bg_xz input[name=checkbox]").each(function(){ //遍历table里的全部checkbox
idsstr += $(this).val() + ","; //获取所有checkbox的值
if($(this).attr("checked")) //如果被选中
zhi += $(this).val() + ","; //获取被选中的值
});
if(idsstr.length > 0) //如果获取到
idsstr = idsstr.substring(0, idsstr.length - 1); //把最后一个逗号去掉
if(zhi.length > 0) //如果获取到
zhi = zhi.substring(0, zhi.length - 1); //把最后一个逗号去掉
alert("所有checkbox的值：" + idsstr);
alert("被选中checkbox的值：" + zhi);
document.form.action="addRole.do?zhi="+zhi
document.form.submit()
});
}

</script>
<body class="mian_bj">
<div class="mian_top_01">
<div class="mian_top_r"></div>
<div class="mian_top_l"></div>
<div class="mian_top_c">
</div>
<div class="mian_b">
<form action="" method="post" name="form">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="mian_b_bg_xz">
<tr>
<td width="5%" class="mian_b_bg_lm">&nbsp;</td>
<td colspan="4" class="mian_b_bg_lm">添加角色</td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="7%" valign="top">角色名称：</td>
<td width="20%">
<input type="text" class="input_01" name="rolename" id="name"> </td>
<td width="7%"></td>
<td width="56%"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td valign="middle">权限管理：</td>
<td colspan="3">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="mian_b_bg_xz">
<tr bgcolor="#BDB76B">
<td valign="top" colspan="3"><O>客户管理权限</O></td>
</tr>
<tr>
<td width="3%">&nbsp;</td>
<td colspan="2">
<input name="checkbox" type="checkbox" value="1">客户基础信息 &nbsp;&nbsp;&nbsp;
<input name="checkbox" type="checkbox" value="2">客户接待记录&nbsp;&nbsp;&nbsp;
<input name="checkbox" type="checkbox" value="3">销售机会
</td>
</tr>
<tr bgcolor="#BDB76B">
<td valign="top" colspan="3"><O>交易管理权限</O></td>
</tr>
<tr>
<td width="3%">&nbsp;</td>
<td colspan="2">
<input name="checkbox" type="checkbox" value="4">开盘管理&nbsp;&nbsp;&nbsp;<input name="checkbox" type="checkbox" value="5">订单管理&nbsp;&nbsp;<input name="checkbox" type="checkbox" value="8">合同管理&nbsp;&nbsp;&nbsp;<input name="checkbox" type="checkbox" value="6">付款方式管理&nbsp;&nbsp;&nbsp;<input id="Checkbox77" type="checkbox" value="7">报告审核
</td>
</tr>
<tr>
<td valign="top" colspan="3" bgcolor="#BDB76B">
<O>后台管理权限</O></td>
</tr>
<tr>
<td width="3%">&nbsp;</td>
<td colspan="2">
<input name="checkbox" type="checkbox" value="9">用户管理&nbsp;&nbsp;&nbsp;<input name="checkbox" type="checkbox" value="11">角色管理&nbsp;&nbsp;&nbsp;<input name="checkbox" type="checkbox" value="11">组织机构管理&nbsp;&nbsp;&nbsp;<input name="checkbox" type="checkbox" value="12">项目管理</br>
<input name="checkbox" type="checkbox" value="13">楼栋管理&nbsp;&nbsp;&nbsp;<input name="checkbox" type="checkbox" value="14">单元管理&nbsp;&nbsp;&nbsp;<input name="checkbox" type="checkbox" value="15">房间管理
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="4">
<div align="center">
<input type="button" value="确定" onclick="addClick()" > 
</div>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>

后台接值  form表单中的值和拼接的字符串全都取到

 

@RequestMapping("/addRole.do")
public String addRole(Role role,String zhi){
System.out.println("role"+role);
String[] split = zhi.split(",");
for (int i = 0; i < split.length; i++) {
String string = split[i];
System.out.println("zhi"+string);
}  
return "redirect:SelectAll.do";
}

 

form中相同name的checkbox提交问题
03-21
NULL 博文链接：https://blackbaby.iteye.com/blog/969270
jquery获取form表单input元素值的简单实例
10-22
在本篇内容中，我们将详细探讨如何使用jQuery来获取form表单中input元素的值，包括文本框、复选框、单选按钮等不同类型input元素的值获取方法。通过jQuery提供的val()方法和attr()方法，我们可以轻松获取或设置input...
ssm jQuery 获取checkbox选中的值form表单提交例子
weixin_33985679的博客
01-11 782
前台页面 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loos...
Jquery 获取form表单text,areatext,radio,checkbox,select值
weixin_33806509的博客
03-07 216
1.如何取form中的各种值 //获取text,areatext的值 var text_attr=$("#text_id").attr("value"); //或 var text_val=$("#text_id").val(); //获取单选按钮值 var text_radio=$("input[name='textradio']:checked").val(); //获取复选框值...
关于“CheckBox”通过表单提交的问题
a4330805的博客
05-05 892
大多数时候CheckBox取值传到java后台都是通过js取值，ajax传值,今天改一离职同事的老代码，那家伙通过表单提交一些列的CheckBox设置，没想到的是后台死活接收不正常，name、value键值对一直不能完全接收到，非常诧异。搞了好久才发现规律：原来通过表单提交CheckBox时未选中（即不含checked属性的）的input（type=CheckBox）不会被提交，...
Jquery 获得Form下的所有text、checkbox等表单的值
wangql521的专栏
09-05 1450
Jquery使用表单我主要是想获得某一个表单下的所有text获得checkbox的值: 可以这样写: var parameter={};  $("input[type=text]",document.forms[0]).each(function(){   alert(this.name);  }); 获得所有名为hobby的选中的checkbox的值和form2下的所有t
layui checkbox默认选中,获取选中值,清空所有选中项的例子
10-16
在本文中，我们将深入探讨如何使用layui框架处理checkbox控件，包括如何设置默认选中、获取选中值以及清空所有选中项。layui是一款基于前端JavaScript库的模块化前端框架，提供了丰富的UI组件，包括表格、表单、按钮...
JQUERY获取form表单值的代码
10-29
// 获取选中的option的value值 ``` 如果需要获取所有选中的`<option>`的文本，可以使用循环： ```javascript $('select>option').each(function(){ if ($(this).attr('selected') == true) { alert($(this)....
jquery form表单获取内容以及绑定数据
10-22
`.serialize()`通常在提交表单时使用，但在某些情况下，开发者可能需要以JSON格式获取表单数据，这就需要用到`.serializeArray()`，这个方法会将表单数据序列化为一个数组对象。但是，当表单中存在多个同名的`...
使用checkbox指提交数据
王伟峰
04-03 5067
向服务器端提交单个数据很简单，提交一组数据也不难：设成相同的name属性，服务器端收到数组形式然后处理即可。但是测试中发现checkbox设成相同的name属性之后，在struts2的Action里面无法得到正确的数据。具体表现是：只有选中的checkbox才有值，而且还是false。（PS：我使用struts2的自动类型转换，将checkbox的值转换为boolean数组）试过设置value的值，但是没用。于是就只有绕道而行了。网上有方法，说是在提交的时候，通过js来对checkbox遍历一下，组成一个字
怎么提交 checkbox 表单_8. html form表单
weixin_29623481的博客
01-28 1638
“仅供学习，转载请注明出处”form表单表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：1、标签 定义整体的表单区域action属性 定义表单数据提交地址method属性 定义表单提交的方式，一般有“get”方式和“post”方式2、标签 为表单元素定义文字标注3、标签 定义通用的表单元素type属性type="text" 定义单行文本输入框type="...
关于form表单中checkbox和数组值的提交
fl8545的博客
12-18 3368
###要求是做一个新增试题的页面，使用的layui框架。效果图如下，可以根据题目类型的选择自动变换答案的单选框和复选框，并且可以添加删除选项的同时也新增或删除答案按钮。最小两个选项。 在实现的过程中遇到的问题： 就是复选框提交的值在后台只接收到了最后一个，最后发现是checkBox的name值写的有问题，应该是name=answer[]，这样提交到后台就是一个数组。 <div class="layui-form-item" pane=""> <label class="lay
怎样取得提交的form表单中的复选框数据
madingludejin的专栏
07-31 9966
html>head>meta http-equiv="Content-Type" content="text/html; charset=gb2312">title>无标题文档title>head>body>form action="test.asp" method="get" name="form1">input name="fruit" type="checkbox" value="香蕉"
jquery之checkbox全选反选提交参数
php-yyds
11-06 752
标签来触发相应的操作方法。当点击不同的按钮时，相应的JavaScript代码会执行，实现了checkbox的全选、全不选、反选和提交功能。你可以根据自己的需求来处理选中的值，例如将其发送给服务器或进行其他操作。标签中编写了全选、全不选、反选和提交的操作方法。标签中，我们创建了一些checkbox选项，并使用。选择所有被选中的checkbox，并将其值存入。标签中引入了jQuery库，并在。在提交按钮的点击事件中，我们通过。在上述示例中，我们在。
获取checkbox选中的值，提交Form表单
热门推荐
qingkaqingka的博客
12-19 1万+
点击提交按钮的时候，将所有CheckBox选中项弹出显示。 &lt;script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"&gt;&lt;/script&gt; &lt;input name="Jszzdm1" id="Jszzdm1" type="checkbox" value="1"
php checkbox表单提交,HTML表单Checkbox的值如何正确提交到PHP后台？，需要技巧
weixin_39676021的博客
03-12 1030
Checkbox的值和其他input输入框的值一样，也是通过from提交到服务器后台，PHP再用全局变量 _POST，就能得到这些值。但checkbox有一点区别，有需要特别注意的地方，下面一起看下。操作方法01我们先看下HTML的代码，就是一个form，里面有input输入框，和 一组checkbox，和一个提交按钮，代码如图02再看下后端的php代码，就是获取到表单post过来的变量，然后用 ...
form表单提交数组类型数据（CheckBox等）
m0_52613676的博客
12-27 4712
最简单的，直接提交form： <form action="/upload" id="form"> <input type="text" name="name" th:value="${name}"> <div> <input type="checkbox" name="location" value="东">东 <input type="checkbox" name="location" value="南"&
jquery判断多个input框是否选中并提交数据(数据提交成功后对所选的input框进行操作)
圆野的博客
09-14 1738
//遍历后端数据 //创建table var $tabledeliver = $('<table class="tabledeliver">'); $.each(datadeliver,function(i,e){ //datadeliver后端数据 //遍历后端数据 var $trdel...
jquery获取form表单的参数,含多选
最新发布
11-21
在jQuery中，获取包含多选框的form表单参数有多种方法。 ### 方法一：使用`serialize()`方法 `serialize()`方法会将表单元素的值序列化为URL编码的字符串。对于多选框，选中的值会被包含在序列化的字符串中，未选中的值则会被忽略。以下是示例代码： ```html <!DOCTYPE html> <html> <head> <title>获取多选框的form表单参数</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <form id="myForm"> <label> <input type="checkbox" name="fruits" value="apple"> 苹果 </label> <label> <input type="checkbox" name="fruits" value="banana"> 香蕉 </label> <label> <input type="checkbox" name="fruits" value="orange"> 橙子 </label> <button id="btnGetValues">获取值</button> </form> <script> $(document).ready(function() { $("#btnGetValues").click(function(event) { event.preventDefault(); var formData = $("#myForm").serialize(); console.log(formData); }); }); </script> </body> </html> ``` 在上述代码中，点击按钮时，`serialize()`方法会将表单中所有选中的多选框的值序列化为字符串并输出到控制台。 ### 方法二：使用`serializeArray()`方法 `serializeArray()`方法会将表单元素的值序列化为一个包含多个对象的数组，每个对象包含`name`和`value`属性。对于多选框，选中的值会被包含在数组中，未选中的值则会被忽略。以下是示例代码： ```html <!DOCTYPE html> <html> <head> <title>获取多选框的form表单参数</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <form id="myForm"> <label> <input type="checkbox" name="fruits" value="apple"> 苹果 </label> <label> <input type="checkbox" name="fruits" value="banana"> 香蕉 </label> <label> <input type="checkbox" name="fruits" value="orange"> 橙子 </label> <button id="btnGetValues">获取值</button> </form> <script> $(document).ready(function() { $("#btnGetValues").click(function(event) { event.preventDefault(); var formData = $("#myForm").serializeArray(); console.log(formData); }); }); </script> </body> </html> ``` 在上述代码中，点击按钮时，`serializeArray()`方法会将表单中所有选中的多选框的值序列化为一个数组并输出到控制台。 ### 方法三：手动遍历多选框 可以手动遍历表单中的多选框，获取选中的值并将其存储在一个数组中。以下是示例代码： ```html <!DOCTYPE html> <html> <head> <title>获取多选框的form表单参数</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <form id="myForm"> <label> <input type="checkbox" name="fruits" value="apple"> 苹果 </label> <label> <input type="checkbox" name="fruits" value="banana"> 香蕉 </label> <label> <input type="checkbox" name="fruits" value="orange"> 橙子 </label> <button id="btnGetValues">获取值</button> </form> <script> $(document).ready(function() { $("#btnGetValues").click(function(event) { event.preventDefault(); var selectedValues = []; $("input[name='fruits']:checked").each(function() { selectedValues.push($(this).val()); }); console.log(selectedValues); }); }); </script> </body> </html> ``` 在上述代码中，点击按钮时，会手动遍历表单中所有选中的多选框，将其值存储在`selectedValues`数组中并输出到控制台。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值