[英]jQuery Select All Textboxes In Each Row Where Checkbox is Checked
I have view that contains a table with the following structure: 我有一个包含以下结构的表的视图:
<table id="mappings">
<thead>
<tr>
<th width="40%"><input type="checkbox" id="cb-master" /> Structure</th>
<th width="15%">Excel Column</th>
<th width="15%">Excel Row Start</th>
<th width="15%">Excel Row End</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="cb-1" value="1" /> Item 1</td>
<td><input type="text" id="col-1" value="A" /></td>
<td><input type="text" id="rstart-1" value="5" /></td>
<td><input type="text" id="rend-1" value="20" /></td>
</tr>
<tr>
<td><input type="checkbox" id="cb-2" value="2" /> Item 2</td>
<td><input type="text" id="col-2" value="B" /></td>
<td><input type="text" id="rstart-2" value="5" /></td>
<td><input type="text" id="rend-2" value="20" /></td>
</tr>
.
.
.
<tr>
<td><input type="checkbox" id="cb-n" value="n" /> Item n</td>
<td><input type="text" id="col-n" value="Z" /></td>
<td><input type="text" id="rstart-n" value="5" /></td>
<td><input type="text" id="rend-n" value="20" /></td>
</tr>
</tbody>
</table>
Where ItemId
is the value contained in the checkbox, and the id
of each input is appended with the Id
of the current item. 其中ItemId
是复选框中包含的值,每个输入的id
附加了当前项的Id
。 How can I iterate through the table above with jQuery and create a JSON array containing the values of the textboxes in each row where the checkboxes checked
value is set to true? 如何使用jQuery迭代上面的表并创建一个JSON数组,其中包含复选框checked
值设置为true的每行中文本框的值?
I would like the JSON object to look like this (if possible): 我希望JSON对象看起来像这样(如果可能的话):
[
{ "ItemId": "1", "ExcelColumn": "A", "ExcelRowStart": "5", "ExcelRowEnd": "20" },
{ "ItemId": "2", "ExcelColumn": "B", "ExcelRowStart": "5", "ExcelRowEnd": "20" },
.
.
.
{ "ItemId": "n", "ExcelColumn": "Z", "ExcelRowStart": "5", "ExcelRowEnd": "20" }
]
Here you go: 干得好:
$("#mappings tr input:checkbox:checked")
.closest("tr").find("input:text").css({ "border" : "1px solid red" });
Here's a jsFiddle: http://jsfiddle.net/xgSpp/ 这是一个jsFiddle: http : //jsfiddle.net/xgSpp/
To serialize the selection to JSON you can simply call serializeArray
. 要将选择序列化为JSON,您只需调用serializeArray
。 The only catch is that you have to provide names for the elements. 唯一的问题是你必须提供元素的名称。
var result = $("#mappings tr input:checkbox:checked").closest("tr").find("input:text").serializeArray();
alert(JSON.stringify(result));
If you add class for the input, then coding can be simpler 如果为输入添加类,则编码可以更简单
<tr>
<td><input type="checkbox" id="cb-1" value="1" class="ItemId" /> Item 1</td>
<td><input type="text" id="col-1" value="A" class="ExcelColumn"/></td>
<td><input type="text" id="rstart-1" value="5" class="ExcelRowStart" /></td>
<td><input type="text" id="rend-1" value="20" class="ExcelRowEnd" /></td>
</tr>
var result = [];
$("tbody :checked").each(function(){
var tr = $(this).parent('td').parent('tr');
var item = {};
$("input", tr).each(function(){
item[$(this).attr("class")] = $(this).val();
});
result.push(item);
});
check this at http://jsfiddle.net/mxELP/4/ 请访问http://jsfiddle.net/mxELP/4/查看此内容
Alright so here's what I came up with: http://jsfiddle.net/manuel/rmwSY/ 好吧,这就是我想出的: http : //jsfiddle.net/manuel/rmwSY/
Mind that I think you made a typo on <td><input type="checkbox" id="cb-2" value="1" />
. 请注意,我认为你在<td><input type="checkbox" id="cb-2" value="1" />
错误<td><input type="checkbox" id="cb-2" value="1" />
。 Shouldn't this be value="2"
? 这不应该是value="2"
吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.