jQuery選中檢查復選框的每一行中的所有文本框

Question

我有一個包含以下結構的表的視圖：

<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>

其中ItemId是復選框中包含的值，每個輸入的id附加了當前項的Id 。 如何使用jQuery迭代上面的表並創建一個JSON數組，其中包含復選框checked值設置為true的每行中文本框的值？

我希望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" }
]

Answer 1

干得好：

$("#mappings tr input:checkbox:checked")
    .closest("tr").find("input:text").css({ "border" : "1px solid red" });

這是一個jsFiddle： http ： //jsfiddle.net/xgSpp/

要將選擇序列化為JSON，您只需調用serializeArray 。 唯一的問題是你必須提供元素的名稱。

var result = $("#mappings tr input:checkbox:checked").closest("tr").find("input:text").serializeArray();
alert(JSON.stringify(result));

Answer 2

如果為輸入添加類，則編碼可以更簡單

 <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);
});

請訪問http://jsfiddle.net/mxELP/4/查看此內容

Answer 3

好吧，這就是我想出的： http ： //jsfiddle.net/manuel/rmwSY/

請注意，我認為你在<td><input type="checkbox" id="cb-2" value="1" />錯誤<td><input type="checkbox" id="cb-2" value="1" /> 。 這不應該是value="2"嗎？