Javascript 如何使用Jquery获取复选框值并存储为多维数组?
我有多个复选框,它们有值和标题属性。 这里的标题表示组,所以当我选中任何复选框时,它们将存储为Json多维数组 Html:Javascript 如何使用Jquery获取复选框值并存储为多维数组?,javascript,php,jquery,arrays,checkbox,Javascript,Php,Jquery,Arrays,Checkbox,我有多个复选框,它们有值和标题属性。 这里的标题表示组,所以当我选中任何复选框时,它们将存储为Json多维数组 Html: <span> <input type="checkbox" value="4" title="23"> <input type="checkbox" value="5" title="23"> <input type="checkbox" value="2" title="24"> </span&
<span>
<input type="checkbox" value="4" title="23">
<input type="checkbox" value="5" title="23">
<input type="checkbox" value="2" title="24">
</span>
<output id="hsearchData"></output>
当我取消选中复选框时,值将从数组组中移除,并且当未从数组组中选中任何值时,将从数组组中移除
我做了以下代码:
$('span').find('input[type=checkbox]').click(function(event) {
var searchData = $('input:checkbox:checked').map(function() {
return this.value;
}).get();
$("#hsearchData").val(searchData);
});
这应该是您正在寻找的: Javascript
var json = {};
$('input[type="checkbox"]').change(function() {
var title = $(this).attr('title');
var id = $(this).val();
var prop = $(this).is(':checked');
if (prop) {
if (typeof json[title] === 'undefined') {
json[title] = [id];
} else {
json[title].push(id);
}
} else {
json[title].remove(id);
if(!json[title].length) { delete json[title] }
}
console.log(json);
});
Array.prototype.remove = function() {
var what, a = arguments, L = a.length, ax;
while (L && this.length) {
what = a[--L];
while ((ax = this.indexOf(what)) !== -1) {
this.splice(ax, 1);
}
}
return this;
};
每次更改复选框时,都可以重新创建完整对象:
var wrapper = $('span')
var inputs = wrapper.find('input[type=checkbox]')
var checked = {}
wrapper.on('change', function (event) {
checked = {}
inputs.each(function (k, v) {
(checked[this.title] = checked[this.title] || []).push(this.value)
})
console.log(checked)
}).trigger('change')
正如Yukulélé提到的,您想要获取的特定json是无效的。这是因为大括号表示一个JSON对象,一个对象不能有两个同名属性。想象一下这个物体:
var person = {firstName:"John", firstname:"Henry"}
如何指定希望获取的firstname属性
下面的代码将使用数组关闭所需的json输出
$('span').find('input[type=checkbox]').click(function(event) {
var values = {};
$('input:checkbox:checked').each(function() {
if (values[this.title])
values[this.title].push({ id: this.value });
else
values[this.title] = [{ id: this.value }];
});
$("#hsearchData").val(JSON.stringify(values));
});
您的json无效:您不能有2个
id
键。不过,您可以使用数组:{23:[4,5],24:[2]}
感谢@Ausxor为您提供宝贵的时间。
$('span').find('input[type=checkbox]').click(function(event) {
var values = {};
$('input:checkbox:checked').each(function() {
if (values[this.title])
values[this.title].push({ id: this.value });
else
values[this.title] = [{ id: this.value }];
});
$("#hsearchData").val(JSON.stringify(values));
});