Question

我已经为此工作了几天。我需要帮助。我试图遍历整个表并获取该行中的所有<input>数据，如果该行中的复选框被选中并且serializeArray将它们放入数组中。现在，如果我选中一个复选框，它也将从其他行中获取所有<input>数据。

http://jsfiddle.net/h82om7sf/20/

$(function()
{
    $('#submitButton').click(function(){

        var data = new Array();
        var i=0;
        $('#add table').find('input[type=checkbox]:checked').each(function(){

            data[i] = $('#add :input').serializeArray();
            i++;
        });

        alert(data.toSource());

    });
});


<div id="add">
        <table>
            <tr>
                <button id ="submitButton" type="button">Build</button>
            </tr>
            <tr>
                <td><input id="name1" type="checkbox" name="name" value="checkboxValue0"/></td>
                <td>Id<input type="hidden" name="id" value="1"/></td>
                <td>
                    <input type="text" placeholder="Placeholder" name="address"/>
                </td>
                <td>
                    <input type="radio" name="radioButton0" value="1" />radioButton1 1
                    <input type="radio" name="radioButton0" value="2" />radioButton1 2
                </td>
            </tr>
            <tr>
                <td><input id="name2" type="checkbox" name="name" value="checkboxValue0"/></td>
                <td>Id<input type="hidden" name="id" value="2"/></td>
                <td>
                    <input type="text" placeholder="Placeholder" name="address"/>
                </td>
                <td>
                    <input type="radio" name="radioButton1" value="1" />radioButton2 1
                    <input type="radio" name="radioButton1" value="2" />radioButton2 2
                </td>
            </tr>

            <tr>
                <td><input id="name3" type="checkbox" name="name" value="checkboxValue0"/></td>
                <td>Id<input type="hidden" name="id" value="3"/></td>
                <td>
                    <input type="text" placeholder="Placeholder" name="address"/>
                </td>
                <td>
                    <input type="radio" name="radioButton2" value="1" />radioButton3 1
                    <input type="radio" name="radioButton2" value="2" />radioButton3 2
                </td>
            </tr>            
        </table>
    </div>

Answer 1

你走了：使用$.each()或$.map()循环选中的行并收集用户设置的所有值并创建一个对象数组。

使用$.each()进行演示:(导致控制台F12）> JSnippet Demo with each() <

使用$.map()进行演示:(导致控制台F12）> JSnippet Demo with map() <

使用$.each()的代码（没有更改HTML）：

    $('#submitButton').click(function(){
        var values = [];
        $("#add input[name=name]:checked").each(function(){
            row = $(this).closest("tr");
            values.push({ 
                checkbox_id : $(this).val(),
                hidden_id  : $(row).find("input[name=id]").val(),
                address     : $(row).find("input[name=address]").val(),
                radio       : $(row).find('input[type=radio]:checked').val() || "not selected"       
            });
        });
        console.log(values);
        /* Do some stuff with the values collected */
    });

使用$.map()的代码（没有更改HTML）：

$('#submitButton').click(function(){
        var values = $("#add table input[name=name]:checked").map(function() {
                row = $(this).closest("tr");
                return { 
                         checkbox_id : $(this).val(),
                         hidden_id   : $(row).find("input[name=id]").val(),
                         address     : $(row).find("input[name=address]").val(),
                         radio       : $(row).find('input[type=radio]:checked').val() || "not selected"       
                        }
            }).get();
        console.log(values);
    });

Answer 2

您可以使用.map

$('#submitButton').click(function() {
    var values = $("#add table input[name=name]:checked").map(function() {
        return $(this).closest("tr").find("input[name=address]").val();
    }).get();

    //"values" is now an array of your values
});

演示，当然：http://jsfiddle.net/h82om7sf/4/

Answer 3

getSelected() {
        var values = [];
        var table = $('#shipments_table').DataTable();
        $("tbody input:checked").each(function(){
            var row = table.row($(this).closest('tr')).data()
            values.push(row);
        });
        console.log(values);
        }`enter code here`

获取具有已选中复选框的行的所有<input />数据

3 个答案: