Javascript 使用jQuery自动获取div中所有元素的值
我有一个主div,里面有很多输入文本和单选按钮。Javascript 使用jQuery自动获取div中所有元素的值,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,我有一个主div,里面有很多输入文本和单选按钮。 像这样: <div id="mainDiv"> <input type="text" name="text-1" /> <br/> <input type="radio" name="radio-1" />Yes <input type="radio" name="radio-1" />No <br/> <input type="text"
像这样:
<div id="mainDiv">
<input type="text" name="text-1" /> <br/>
<input type="radio" name="radio-1" />Yes
<input type="radio" name="radio-1" />No <br/>
<input type="text" name="text-2" /> <br/>
<input type="text" name="text-3" /> <br/>
</div>
<img src="img/img.gif" onclick="getAllValues();" />
对
否
我想在jQuery中定义函数getAllValues()
,以获取mainDiv
中的所有值,并将它们保存在字符串中。有可能吗?要实现这一点,您可以选择所有表单字段,并使用
map()
从它们的值创建一个数组,该数组可以根据它们的类型进行检索。试试这个:
function getAllValues() {
var inputValues = $('#mainDiv :input').map(function() {
var type = $(this).prop("type");
// checked radios/checkboxes
if ((type == "checkbox" || type == "radio") && this.checked) {
return $(this).val();
}
// all other fields, except buttons
else if (type != "button" && type != "submit") {
return $(this).val();
}
})
return inputValues.join(',');
}
这里可以将if
语句连接在一起,但为了清晰起见,我将它们分开了。试试这样的方法:
function getAllValues() {
var allVal = '';
$("#mainDiv > input").each(function() {
allVal += '&' + $(this).attr('name') + '=' + $(this).val();
});
alert(allVal);
}
下面是一个解决方案,它为您构建一个JSON字符串。它将获取文本字段、复选框和选择元素的值:
function buildRequestStringData(form) {
var select = form.find('select'),
input = form.find('input'),
requestString = '{';
for (var i = 0; i < select.length; i++) {
requestString += '"' + $(select[i]).attr('name') + '": "' +$(select[i]).val() + '",';
}
if (select.length > 0) {
requestString = requestString.substring(0, requestString.length - 1);
}
for (var i = 0; i < input.length; i++) {
if ($(input[i]).attr('type') !== 'checkbox') {
requestString += '"' + $(input[i]).attr('name') + '":"' + $(input[i]).val() + '",';
} else {
if ($(input[i]).attr('checked')) {
requestString += '"' + $(input[i]).attr('name') +'":"' + $(input[i]).val() +'",';
}
}
}
if (input.length > 0) {
requestString = requestString.substring(0, requestString.length - 1);
}
requestString += '}';
return requestString;
}
结果它与输入文本一起工作,但与单选按钮一起,我只接受选定的值。谢谢你,罗瑞!<代码>类型!=“按钮”| |类型!=“提交”
这不应该是&&
而不是|
?否则你会把所有东西都捡起来。@JonWyatt谢谢!你说得对-7.5年来第一个注意到的人:)你看过.serialize()
()吗?这符合你的要求吗?若否,原因为何?
buildRequestStringData($('#mainDiv'))