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

最新推荐文章于 2025-08-11 01:12:22 发布

转载最新推荐文章于 2025-08-11 01:12:22 发布 · 834 阅读

文章标签：

#jquery #input #callback #function #json #javascript

javascript 专栏收录该内容

37 篇文章

订阅专栏

本文介绍如何使用jQuery从HTML表单中获取选中的复选框值，并将其封装为JSON对象发送到服务器。主要涉及HTML元素的选择、遍历及JSON数据的构造。

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

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

页面：

Html代码

用户名：<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" />

		用户名：<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代码：

Javascript代码

$("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));
}

$("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));
}

中间遇到的问题主要是怎么把checked这个数组中的值取出来，通过alert，我们可以知道 checked.get(0)返回的是一个HTMLINPUTELEMENT对象，因此此时，已经是一个dom对象了，可以直接通过value这个属性来取出对应的属性值