获取checkbox选中项的value值

最新推荐文章于 2023-03-15 17:48:06 发布

Alone_in_

最新推荐文章于 2023-03-15 17:48:06 发布

阅读量5.6k

点赞数 2

分类专栏：随笔文章标签： jquery

本文链接：https://blog.csdn.net/Alone_in_/article/details/104665425

版权

随笔专栏收录该内容

29 篇文章 0 订阅

订阅专栏

获取checkbox选中项的value值

首先，上案例，再一步步进行解析……

案例一：

<%@ 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>
<head>
<script src="jquery-3.4.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小白网页</title>
</head>

<body>
	<h1>小白学习</h1>
	<form action="##" title="爱好：">
	
		<input name="habit" type="checkbox" value='乒乓球'>乒乓球<br>
		<input name="habit" type="checkbox" value='篮球'>篮球<br>
		<input name="habit" type="checkbox" value='羽毛球'>羽毛球<br>
		<input name="habit" type="checkbox" value='溜溜球'>溜溜球<br>
		<input name="habit" type="checkbox" value='排球'>排球<br><br>

		<input type="button" value="提交" onclick="getHabit()"><br><br>

	</form>
	<script>
		function getHabit() {
		    //$('input:checkbox:checked') 等同于 $('input[type=checkbox]:checked')
		    $.each($('input:checkbox:checked'), function() {
		        window.alert("你选了" + $('input[type=checkbox]:checked').length + "个,其中有" + $(this).val())
		    });
		}

	</script>
</body>
</html>

这里用 JQuery 的 foreach 的写法将input中 type=checkbox 的checked（选中）对象遍历出来，并获取它的 val 值。

案例二：

<%@ 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>
<head>
<script src="jquery-3.4.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小白网页</title>
</head>

<body>
	<h1>小白学习</h1>
	<form action="##" title="爱好：">
	
		<input name="habit" type="checkbox" value='乒乓球'>乒乓球<br>
		<input name="habit" type="checkbox" value='篮球'>篮球<br>
		<input name="habit" type="checkbox" value='羽毛球'>羽毛球<br>
		<input name="habit" type="checkbox" value='溜溜球'>溜溜球<br>
		<input name="habit" type="checkbox" value='排球'>排球<br><br>

		<input type="button" value="提交" onclick="getHabit()"><br><br>

	</form>
	<script>
		function getHabit() {
		    var obj = $('input[name="habit"]');//document.getElementsByName('habit');
		    var habit = '';
		    for (var i = 0; i < obj.length; i++) {
		        if (obj[i].checked) {
		            habit += obj[i].value + ","
		        }
		    }
        // 此处有三种方法将最后一个逗号去掉
		    //habit = habit.substring(habit.length-1) == ',' ? habit.substring(0, habit.length-1) : habit;
		    //habit = habit.substring(0,habit.lastIndexOf(','));
		    var reg = /,$/gi;
		    habit = habit.replace(reg, "");

		    alert("habit==" + habit);
		}
	</script>
</body>
</html>

这里第一步先获取 input 中 name="habit" 的对象存储到 obj 中，用 for 语句去遍历循环拼接value值，最后将结尾多余的逗号去掉就完成了。这样就可以轻松获取到拼接的value值，并传到后台进行处理。

讲解一下切割字符串的第三种方法，正则表达式。格式分两种

（1）隐式创建： var 对象=/匹配模式/匹配标志;

（2）直接实例化 var 对象=new RegExp(“匹配模式”,’匹配标志’);

我在这用的是隐式创建，显示可以这么写：var reg = new RegExp( ",$" , " gi " );

逗号代表的就是逗号，$ 这个代表以什么结尾，g 表示全局匹配，i 表示不区分大小写。总的意思连起来就是：以逗号结尾不区分大小写的全局匹配。.replace(reg, "") 表示匹配到格式相符的字符串用空字符串替代。

小提示：

最后提醒一下，这里用了两种循环，是想用多种形式来展示，其实两种循环是可以转换的，只是用法略微不同而已。

Alone_in_

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
获取checkbox选中项的value值

获取checkbox选中项的value值首先，上案例，再一步步进行解析……案例一：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transition...
复制链接

扫一扫