获取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, "") 表示匹配到格式相符的字符串用空字符串替代。
小提示:
最后提醒一下,这里用了两种循环,是想用多种形式来展示,其实两种循环是可以转换的,只是用法略微不同而已。