[英]jQuery get complex multiple checked values from checkbox to array
我想在选择复选框时动态显示与访问者选择有关的网站内容。 在Ajax和php端发送信息没有问题。 但是我无法在jQuery中创建所需的数组。
HTML:
<div id="filter">
<div class="sizes">
<input type="checkbox" data-group="size_catalog" data-value="32">
<input type="checkbox" data-group="size_catalog" data-value="36">
<input type="checkbox" data-group="size_catalog" data-value="38">
<input type="checkbox" data-group="size_catalog" data-value="40">
</div>
<div class="colors">
<input type="checkbox" data-group="color_catalog" data-value="red">
<input type="checkbox" data-group="color_catalog" data-value="blue">
<input type="checkbox" data-group="color_catalog" data-value="black">
</div>
</div>
我想要具有多个数组的对象(有必要对同一数据组进行分组):
var myArray = {size_catalog : ["32", "36", "38"], color_catalog: [red, blue]};
我当前的代码(可在Internet上找到并改编)创建了一个简单的数组:
function getChecked(){
var opts= [];
$checkboxes.each(function(){
if(this.checked){
opts.push(this.value);
}
});
return opts;
}
function updateSearch(opts){
$.ajax({
type: "POST",
url: "class.search.php",
dataType : 'json',
cache: false,
data: {filterOpts: opts},
success: function(records){
...
}
});
}
var $checkboxes = $("input:checkbox");
$checkboxes.on("change", function(){
var opts = getChecked();
updateSearch(opts);
});
updateSearch();
谢谢您的帮助!
为此,您可以迭代并创建一个对象,并使用size-catalog
作为键,并将数组压入作为值。
var $checkboxes = $("input:checkbox");
$checkboxes.on('change', function() {
var obj = {};
$checkboxes.filter(':checked').each(function() {
var n = $(this).data('group'),
v = $(this).data('value');
n in obj ? obj[n].push( v ) : obj[n] = [v];
});
$.post('class.search.php', {filterOpts: obj}, 'json').done(function(records) {
});
});
那不是多维数组,而是一个包含2个不同数组的对象。 如果您想要那样,那么您将需要这样的东西:
function getChecked() {
var sizeArray = [];
var colorArray = [];
$checkboxes.each(function() {
if ($(this).is(':checked')) {
if ($(this).data('group') == 'size_catalog')
sizeArray.push($(this).data('value'));
else if ($(this).data('group') == 'color_catalog')
colorArray.push($(this).data('value'));
}
});
return {
size_catalog: sizeArray,
color_catalog: colorArray
};
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.