如何将选中/未选中的复选框值附加到发布数据
Posted
技术标签:
【中文标题】如何将选中/未选中的复选框值附加到发布数据【英文标题】：How to append checked/unchecked checkbox values to post data 【发布时间】：2018-12-19 23:52:43 【问题描述】：在 javascript 中（可以使用 jQuery），我将如何转换对象数组：
// Array of objects.
var myArray = [ code: "X", selected: true , code: "Y", selected: false , code: "Z", selected: true ];
变成二维值数组？：
var myArray[0][0] = "X";
myArray[0][1] = true;
myArray[1][0] = "Y";
myArray[1][1] = false;
myArray[2][0] = "Z";
myArray[2][1] = true;
我问是因为我在 AJAX 调用中发送数据时遇到了一些问题，该调用将序列化的表单数据与对象数组结合在一起。
我需要将所有数据映射到 View Model 服务器端：
public class MyViewModel
public MyViewModel()
selectedRelatedTaxes = new List<RelatedTax>();
public string co get; set;
public string category get; set;
public string taxCode get; set;
public List<RelatedTax> myArray get; set;
public class RelatedTax
public string code get; set;
public bool selected get; set;
这是试图将所有数据组合在一起的 JavaScript 函数：
function GetAllData()
var result = ;
if (!$('#FormID'))
return ;
result = $('#FormID:not(input[data-function="partOfArray"])').serializeArray();
var myArray = [];
$('input[data-function="partOfArray"]').each(function (index)
var code = $(this).val();
var selected = $(this).is(':checked');
myArray.push( code: code, selected: selected );
);
if (result)
result.push( name: 'myArray', value: myArray );
return result;
如果我使用上面的函数，我会在 AJAX 调用中得到这个数据：
数组未正确映射到列表服务器端。
如果我改用这个 JavaScript 函数：
function Test()
var myArray = [];
$('input[data-function="partOfArray"]').each(function (index)
var code = $(this).val();
var selected = $(this).is(':checked');
myArray.push( code: code, selected: selected );
);
return myArray: myArray ;
我在 AJAX 调用中得到这个数据：
数组确实映射到服务器端的列表。但这当然缺少所有其他数据。
第二张图片的数据格式是什么？对我来说，它看起来像一个二维数组。如何将我的数据数组与所有其他数据一起转换为该格式？
这是进行 AJAX 调用的代码：
function LoadAddCompanyTaxWizard(url)
var formData = GetAllData();
$.ajax(
cache: false,
method: "POST",
url: url,
data: formData
,
.error(...)
.success(...),
.complete(...)
);
【问题讨论】：
问题出在其他地方。发布将数据发布到服务器的代码。 Converting Array of Objects into Array of Arrays的可能重复 下面有很多关于如何从对象数组转换为数组数组的好答案。但是，查看其余代码并不清楚为什么您没有首先制作您想要的数组。为什么不直接使用Array.push([code, selected ]) 开始？
@SalmanA 我已经包含了进行 AJAX 调用的函数。
@HereticMonkey 我很抱歉标题确实让它重复了。更改标题以反映真正的潜在问题可能是最好的，尽管我真的不知道该标题是什么。
【参考方案1】：
我认为你需要修改代码如下：
function GetAllData()
// check if an element exists
if ($('#FormID').length === 0)
return ;
// use the :not filter correctly
var result = $('#FormID input:not([data-function="partOfArray"])').serializeArray();
$('#FormID input[data-function="partOfArray"]').each(function(index)
var code = $(this).val();
var selected = $(this).is(':checked');
result.push(
name: "selectedRelatedTaxes[" + index + "][code]",
value: code
);
result.push(
name: "selectedRelatedTaxes[" + index + "][selected]",
value: selected
);
);
return result;
这是我复制表单的尝试：
function GetAllData()
// check if an element exists
if ($('#FormID').length === 0)
return ;
// use the :not filter correctly
var result = $('#FormID input:not([data-function="partOfArray"])').serializeArray();
$('#FormID input[data-function="partOfArray"]').each(function(index)
var code = $(this).val();
var selected = $(this).is(':checked');
result.push(
name: "selectedRelatedTaxes[" + index + "][code]",
value: code
);
result.push(
name: "selectedRelatedTaxes[" + index + "][selected]",
value: selected
);
);
return result;
$("#FormID").on("submit", function(e)
e.preventDefault();
console.log(GetAllData());
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="FormID">
<input name="category" value="State">
<input name="co" value="CT0002">
<input name="taxCode" value="AK">
<input name="selectedRelatedTaxes" data-function="partOfArray" type="checkbox" value="AKSUI" checked="">
<input name="selectedRelatedTaxes" data-function="partOfArray" type="checkbox" value="AKSUI-E">
<input name="selectedRelatedTaxes" data-function="partOfArray" type="checkbox" value="FOO" checked="">
<input name="selectedRelatedTaxes" data-function="partOfArray" type="checkbox" value="BAR">
<input type="submit" value="Test Script">
</form>【讨论】：
这对我有用！它在服务器端正确映射了所有内容。 i.imgur.com/TgC5Uip.png 是的，我猜是 XY 问题。【参考方案2】：只需map 数组：
var myArray = [ code: "X", selected: true , code: "Y", selected: false , code: "Z", selected: true ];
var result = myArray.map((code, selected) => ([code, selected]));
console.log(result);【讨论】：
@mhodges 您的编辑不只是我答案的副本吗？ （我在您编辑前 3 分钟回答了） 啊，没看到。记录下来，只有 2 分钟 xD【参考方案3】：您可以使用.map() 和Object.values() 非常简单地做到这一点，如下所示：
var myArray = [ code: "X", selected: true , code: "Y", selected: false , code: "Z", selected: true ];
console.log(myArray.map(obj => Object.values(obj)))如果您需要保证数组中项目的顺序，您可以执行以下操作：
var myArray = [ code: "X", selected: true , code: "Y", selected: false , code: "Z", selected: true ];
console.log(myArray.map((code, selected) => [code, selected]))第二种方法的缺点是它不是动态的，您必须明确地对数组中的每个元素进行排序。但就一致的输出而言，它要安全得多。
由于您在问题中没有使用 ES6，因此非 ES6 版本将如下所示：
myArray.map(function (obj)
return [obj.code, obj.selected]
);
【讨论】：
Object.values()会保证正确的顺序吗？
@MarkMeyer 不，Object.values 会以任意顺序返回值，因此不能依赖它。【参考方案4】：
我会使用reduce，两次。
-
减少主数组。
使用它的键减少对象
将缩减后的对象值推送到当前数组中
var myArray = [ code: "X", selected: true , code: "Y", selected: false , code: "Z", selected: true ];
let result = myArray.reduce((arr, itm, idx) =>
arr.push(Object.values(itm).reduce((a, i) => a.concat(i), []))
return arr
, [])
console.log(result[0][0])
console.log(result[0][1])
console.log(result[1][0])
console.log(result[1][1])
console.log(result[2][0])
console.log(result[2][1])【讨论】：
这并不总是有效。您不能依赖Object.values 按[code, selected] 的顺序返回值数组——它以任意顺序返回值。为了安全起见，您必须明确引用对象的 code 和 selected 键，并且每次都以相同的顺序放置它们。
这不是太复杂了吗？！【参考方案5】：
这是在 JS 中创建二维数组的方法
var myArray = [];
$('input[data-function="partOfArray"]').each(function (index)
var code = $(this).val();
var selected = $(this).is(':checked');
myArray.push([code, selected]);
);
这将创建您描述的数组：
var myArray[0][0] = "X";
myArray[0][1] = true;
myArray[1][0] = "Y";
myArray[1][1] = false;
myArray[2][0] = "Z";
myArray[2][1] = true;
【讨论】：
【参考方案6】：你可以在这里找到很多 ES6 中的解决方案。
ES5 中的解决方案
var myArray =
[
code: "X", selected: true,
code: "Y", selected: false,
code: "Z", selected: true
];
var newArray = myArray.map(function(obj)return [obj.code, obj.selected]);
console.log(JSON.stringify(newArray, null, '\t'));【讨论】：
我在 34 分钟前的回答中有一个 ES5 解决方案 @mhodges，O_o，不幸的是没有 sn-p 我没有看到它。以上是关于如何将选中/未选中的复选框值附加到发布数据的主要内容，如果未能解决你的问题，请参考以下文章
如何使用codeigniter将选中和未选中复选框的值更新为表