在页面中想要获取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));
}
中间遇到的问题主要是怎么把checked这个数组中的值取出来 ,通过alert,我们可以知道 checked.get(0)返回的是一个HTMLINPUTELEMENT对象,因此此时,已经是一个dom对象了,可以直接通过value这个属性来取出对应的属性值
分享到:
相关推荐
本文将详细讲解如何使用jQuery来操作checkbox,并实现全选、全不选、反选以及获取选中值这四个核心功能。 ### 一、jQuery选择器与checkbox操作 在jQuery中,我们可以使用不同的选择器来选取页面上的checkbox元素。...
要获取所有选中checkbox的值,可以使用jQuery的`:$()`选择器和`.each()`迭代器。遍历所有checkbox,检查它们是否被选中(`checked`属性),并收集其值: ```javascript var selectedValues = []; $('input[type...
本文将深入探讨如何使用jQuery来实现复选框(checkbox)的选中和取消选中功能,以及如何处理多选的情况。 首先,我们需要理解HTML中的`<input>`元素类型为"checkbox"的基本用法。复选框用于让用户从多个选项中选择...
项目中的分页使用真分页,每次...把选中的checkbox中的id,其中包括模块id,操作id,拼接成一个字符串,然后把字符串传递到action中。 每次调用此页面时,首选调用action中的选中的id字符串,然后根据在id字符串的基
在这个话题中,我们关注的是如何使用jQuery来获取所有被选中的复选框(checkbox)的值,并将这些值组合起来。 首先,我们需要理解jQuery中用于选择特定元素的语法。在这个场景下,我们关注的是带有特定name属性的...
5. **获取选中checkbox的值**: 在确认checkbox被选中后,可以通过`.attr("value")`方法获取它的值。然后,可以将多个选中的值拼接成一个字符串,或存储在数组中。 ### 控制checkbox的选中状态 1. **实现全选和全...
本文将详细探讨如何使用jQuery对checkbox进行操作,这些操作包括选择、取消选择、检查状态以及实现更复杂的交互效果。 一、jQuery选择checkbox 在jQuery中,我们可以使用不同的选择器来选取checkbox元素。例如,`$...
在本文中,我们将深入探讨如何使用jQuery和layui插件来创建功能丰富的checkbox复选框,包括权限范围的多选、单选以及全选操作。同时,我们也将关注于父级和子级复选框之间的联动关系,即父级选中时子级全部选中,而...
在本文中,我们将深入探讨如何使用jQuery UI Multiselect插件来实现下拉多选checkbox的效果。这个插件是jQuery库的一个扩展,它为用户界面添加了一个功能丰富的多选下拉框,提供了美观且用户友好的多选选项。 首先...
本文将详细介绍如何使用jQuery实现复选框的选中与不选中效果的美化。 首先,我们需要理解jQuery的基本用法。jQuery库简化了JavaScript中的DOM操作、事件处理和动画效果。引入jQuery库后,我们可以使用$(document)....
本教程主要探讨的是如何使用jQuery实现多级复选框(checkbox)的功能,包括水平横向、垂直纵向两种排列方式,并且提供了三种不同的样式供选择。通过这个项目,我们可以学习到如何用jQuery控制复选框的状态,以及如何...
本文将详细介绍如何使用jQuery和纯JavaScript来实现Checkbox的全选与反选功能。 #### 二、基础知识回顾 ##### 1. Checkbox简介 Checkbox是一种允许用户进行多项选择的表单控件。每个Checkbox都有一个`checked`...
在“使用JQuery封装的Select&Checkbox&Radio脚本-维豪信息技术有限公司内部”这个项目中,特别提到了在Firefox和IE等系列浏览器中进行了测试。这表明脚本已经考虑到了不同浏览器之间的差异,确保在各种环境下正常...
使用这个插件时,首先需要在页面中引入jQuery库和插件的相关文件。这包括在标签内添加对jQuery库的引用,如`<script src="https://code.jquery.com/jquery-3.x.y.min.js"></script>`,以及引入插件的JS和CSS文件,...
本文将深入探讨如何使用jQuery实现多级复选框的功能,通过分析提供的"jQuery多级复选框checkbox选中代码.zip"中的示例,我们将了解其实现原理及应用。 首先,"index.html"是项目的入口文件,它包含了页面的基本结构...
在这个过程中,我们使用jQuery的`.val()`方法获取每一个复选框的`value`属性值,并通过`push()`方法将这些值添加到一个预先定义的数组中。这种方式更加简洁明了,并且利用了jQuery提供的方法来简化操作。 最后,...
使用jQuery实现多选,可以通过遍历所有checkbox并改变它们的checked属性。例如,以下代码将选中所有checkbox: ```javascript $('input[type="checkbox"]').prop('checked', true); ``` 反之,如果你想要取消所有...
本篇文章将深入探讨如何使用jQuery来操作checkbox和radio元素,这两种元素在表单提交和用户交互中扮演着重要角色。 首先,让我们了解checkbox和radio的基本概念。Checkbox用于提供多选选项,用户可以勾选多个选项;...
本文将详细讲解如何使用jQuery来遍历页面上的所有复选框,并判断它们是否被选中。 首先,我们需要理解jQuery的选择器机制。`:checkbox`是jQuery的一个特殊选择器,用于选取所有的复选框元素。`find()`方法则用于在...