关于使用jquery取得页面中选中的checkbox的实现

最新推荐文章于 2025-08-14 10:46:47 发布

最新推荐文章于 2025-08-14 10:46:47 发布 · 99 阅读

文章标签：

#jQuery #json #JavaScript #HTML #ViewUI

本文介绍如何在JavaScript中获取HTML页面上被选中的Checkbox值，并将其与其它表单数据一起封装到JSON对象中。重点讲解了如何将DOM元素转换为实际的数据值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在页面中想要获取checkbox中的选中的值，然后封装成数组，放到json中，

页面：


		用户名：<input type="text" id="username" /><br />
		密码 ：<input type="password" id="password" /><br />
		确认密码 ：<input type="password" id="repassword" /><br />
		年龄  ：<input type="text" id="age" /><br />
		衣服 ：<input type="checkbox" value="green" />绿色 
		<input type="checkbox" value="red"  /> 红色<br />
		<input type="button" value="提交" id="submit" />

js代码：


$("document").ready(
	function (){
		$("#submit").click(checksubmit);
	}
);

function checksubmit(){
	var cloth = [];
	var checked = $("input:checked");
	for(var i=0;i<checked.length;i++){
		cloth[i] = checked[i].value;
	}
	var json = {
	"username":encode($("#username").val()),
	"password":$("#password").val(),
	"repassword":$("#repassword").val(),
	"age":$("#age").val(),
	"cloth":cloth
	};
	$.get("JSONTest",json,callback);
}

function callback(data){
	alert(data);
}

function encode(data){
	return encodeURI(encodeURI(data));
}