Question

我在视图中有多个复选框，每个复选框都有一些数据属性，例如：

enter image description here

单击按钮后，我将遍历所有选中的复选框，我想要做的是获取每个所选复选框的数据价格和值字段并创建json数组。

这是我到目前为止所做的：

var boxes2 = $("#modifiersDiv :checkbox:checked");
            var selectedModifiers = [];
            var modifierProperties = [];
            for (var i = 0; i < boxes2.length; i++) {

                for (var k = 0; k < boxes2[i].attributes.length; k++) {
                    var attrib = boxes2[i].attributes[k];
                    if (attrib.specified == true) {
                        if (attrib.name == 'value') {
                            modifierProperties[i] = attrib.value;
                            selectedModifiers[k] = modifierProperties[i];
                        }
                        if (attrib.name == 'data-price') {
                            modifierProperties[i] = attrib.value;
                            selectedModifiers[k] = modifierProperties[i];
                        }                 
                    }                    
                }
            }
            var jsonValueCol = JSON.stringify(selectedModifiers);

我无法获取每个复选框的值，而且我只能获取第一个的值，而不是正确的格式，这就是我得到的JSON：

[null,"67739",null,"1"]

任何建议我如何获得正确的数据？

提前致谢，Laziale

Answer 1

如果你想获得一个包含所有选中值的对象，请跳过JSON（它只是一个对象数组）并制作你自己的....

var checked =[];
var getValues = function(){
  $('.modifiers').each(function(post){
    if($(this).prop('checked')){
      checked.push({'data-price':$(this).attr('data-price'),'value':$(this).attr('value')});
    }
  });
}

getValues();

确定我在这里遗漏了一些明显的东西..但心灵在其他地方

Answer 2

您可以使用$ .each来解析jquery数组，例如：

var jsonValueObj = [];
$("#modifiersDiv :checkbox:checked").each(function(){
  jsonValueObj.push({'value':$(this).val(),'data-price':$(this).attr('data-price')});
});
jsonValueCol = JSON.stringify(jsonValueObj);

请注意，使用val（）通常比使用attr（＆＃39; value＆＃39;）更好。有关此内容的更多信息，请参阅：What's the difference between jQuery .val() and .attr('value')?

至于你的代码，你最多只有一个答案，因为你每次进入循环时都会覆盖结果。否则它没关系（格式除外，但我们不确定你想要的格式）。可以请您提供您想要的结果示例吗？

Answer 3

这应该为数组提供值（整数）和价格（浮点数）：

var selected = [];

$("#modifiersDiv :checkbox:checked").each(function()
{
    var val = parseInt($(this).val(), 10);
    var price = parseFloat($(this).data("price"));    
    selected.push(val);
    selected.push(price);
});

编辑：在Laziale发表评论后更新了答案。 $(this)确实没有针对已选中的复选框。现在它应该以复选框为目标。

使用jquery获取控件属性并创建json

3 个答案: