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

最新推荐文章于 2024-06-28 10:47:15 发布
最新推荐文章于 2024-06-28 10:47:15 发布
阅读量8.9k 收藏 4
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JavaLLU/article/details/79045726
版权

 前台页面

<%@ 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="确定" οnclick="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";
}

 

Java程序之猿
关注
如何获取表单 复选框checkBox 的值
小小前端
03-23 6591
​​ <head> <meta charset="UTF-8"> <title>checkBox</title> <!--引入jquery文件--> <script type="text/javascript" src="jquery-1.8.3.min.js"></script>...
form中相同name的checkbox提交问题
03-21
NULL 博文链接：https://blackbaby.iteye.com/blog/969270
ssm jQuery 获取checkbox选中的值form表单提交例子
weixin_33985679的博客
01-11 732
前台页面 <%@ 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、checkbox等表单的值
最新发布
天地不仁，以万物为刍狗！
06-28 703
Jquery使用表单我主要是想获得某一个表单下的所有text获得checkbox的值: 可以这样写: var parameter={}; $("input[type=text]",document.forms[0]).each(function(){ alert(this.name); }); 获得所有名为hobby的选中的checkbox的值和form2下的所有text的值 f
Jquery 获取form表单text,areatext,radio,checkbox,select值
weixin_33806509的博客
03-07 170
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 847
大多数时候CheckBox取值传到java后台都是通过js取值，ajax传值,今天改一离职同事的老代码，那家伙通过表单提交一些列的CheckBox设置，没想到的是后台死活接收不正常，name、value键值对一直不能完全接收到，非常诧异。搞了好久才发现规律：原来通过表单提交CheckBox时未选中（即不含checked属性的）的input（type=CheckBox）不会被提交，...
jquery获取form表单input元素值的简单实例
10-22
在本篇内容中，我们将详细探讨如何使用jQuery来获取form表单中input元素的值，包括文本框、复选框、单选按钮等不同类型input元素的值获取方法。通过jQuery提供的val()方法和attr()方法，我们可以轻松获取或设置input...
JQUERY获取form表单值的代码
10-29
// 获取选中的option的value值 ``` 如果需要获取所有选中的`<option>`的文本，可以使用循环： ```javascript $('select>option').each(function(){ if ($(this).attr('selected') == true) { alert($(this)....
layui checkbox默认选中,获取选中值,清空所有选中项的例子
10-16
在本文中，我们将深入探讨如何使用layui框架处理checkbox控件，包括如何设置默认选中、获取选中值以及清空所有选中项。layui是一款基于前端JavaScript库的模块化前端框架，提供了丰富的UI组件，包括表格、表单、按钮...
怎么提交 checkbox 表单_8. html form表单
weixin_29623481的博客
01-28 1568
“仅供学习，转载请注明出处”form表单表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：1、标签 定义整体的表单区域action属性 定义表单数据提交地址method属性 定义表单提交的方式，一般有“get”方式和“post”方式2、标签 为表单元素定义文字标注3、标签 定义通用的表单元素type属性type="text" 定义单行文本输入框type="...
关于form表单中checkbox和数组值的提交
fl8545的博客
12-18 3067
###要求是做一个新增试题的页面，使用的layui框架。效果图如下，可以根据题目类型的选择自动变换答案的单选框和复选框，并且可以添加删除选项的同时也新增或删除答案按钮。最小两个选项。 在实现的过程中遇到的问题： 就是复选框提交的值在后台只接收到了最后一个，最后发现是checkBox的name值写的有问题，应该是name=answer[]，这样提交到后台就是一个数组。 <div class="layui-form-item" pane=""> <label class="lay
怎样取得提交的form表单中的复选框数据
madingludejin的专栏
07-31 9877
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 648
标签来触发相应的操作方法。当点击不同的按钮时，相应的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 940
Checkbox的值和其他input输入框的值一样，也是通过from提交到服务器后台，PHP再用全局变量 _POST，就能得到这些值。但checkbox有一点区别，有需要特别注意的地方，下面一起看下。操作方法01我们先看下HTML的代码，就是一个form，里面有input输入框，和 一组checkbox，和一个提交按钮，代码如图02再看下后端的php代码，就是获取到表单post过来的变量，然后用 ...
form表单提交数组类型数据（CheckBox等）
m0_52613676的博客
12-27 4583
最简单的，直接提交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 1682
//遍历后端数据 //创建table var $tabledeliver = $('<table class="tabledeliver">'); $.each(datadeliver,function(i,e){ //datadeliver后端数据 //遍历后端数据 var $trdel...
form 表单获取checkbox数据
05-24
在 HTML 中，checkbox 是一种 input 类型，用于让用户选择一项或多项选项。当用户提交包含 checkbox 的表单时，需要获取用户所选的值。 可以通过以下方式来获取 checkbox 的值： 1. 使用 JavaScript： ```html <form> <input type="checkbox" name="fruit" value="apple"> Apple<br> <input type="checkbox" name="fruit" value="banana"> Banana<br> <input type="checkbox" name="fruit" value="orange"> Orange<br> <button onclick="getCheckboxValue()">Submit</button> </form> <script> function getCheckboxValue() { var checkboxes = document.getElementsByName("fruit"); var values = []; for (var i=0; i<checkboxes.length; i++) { if (checkboxes[i].checked) { values.push(checkboxes[i].value); } } console.log(values); } </script> ``` 在此示例中，我们使用了 `document.getElementsByName()` 方法来获取所有名称为 "fruit" 的 checkbox 元素，然后使用 `for` 循环遍历所有 checkbox，如果 checkbox 被选中，则将它的值添加到数组中。最后，我们将数组打印到控制台。 2. 使用 jQuery： ```html <form> <input type="checkbox" name="fruit" value="apple"> Apple<br> <input type="checkbox" name="fruit" value="banana"> Banana<br> <input type="checkbox" name="fruit" value="orange"> Orange<br> <button id="submit-btn">Submit</button> </form> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $("#submit-btn").click(function() { var values = []; $("input[name='fruit']:checked").each(function() { values.push($(this).val()); }); console.log(values); }); </script> ``` 在此示例中，我们使用 jQuery 的选择器来获取所有名称为 "fruit" 的 checkbox 元素，并使用 `each()` 方法遍历所有选中的 checkbox。然后，我们将它们的值添加到数组中，并将数组打印到控制台。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值