获取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="提交" οnclick="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="提交" οnclick="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, "") 表示匹配到格式相符的字符串用空字符串替代。