CODEWITHSUNDEEP
jqueryeach
learntosucceed
learntosucceed

Reputation: 1139

Getting all <input> data of a row that has a checked checkbox

I've been working on this for a few days. I need help. I'm trying to loop through the whole table and get all the <input> data in that row ONLY if the checkbox in that row is checked and serializeArray them to put them in an array. Right now, if I check one checkbox it will grab all the <input> data from other rows too.

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>

Upvotes: 1

Views: 10586

Answers (3)

Mukesh soni
Mukesh soni

Reputation: 11

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`

Upvotes: 1

Shlomi Hassid
Shlomi Hassid

Reputation: 6606

Here you go: using $.each() Or $.map() to loop through the checked rows and collects all values set by the user and creates an array of objects.

Demo with $.each(): ( results in the console F12 ) > JSnippet Demo with each() <

Demo with $.map(): ( results in the console F12 ) > JSnippet Demo with map() <

The Code using $.each() (with no HTML changes):

    $('#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 */
    });

The Code using $.map() (with no HTML changes):

$('#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);
    });

Upvotes: 3

tymeJV
tymeJV

Reputation: 104785

You can use .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
});

A demo, of course: http://jsfiddle.net/h82om7sf/4/

Upvotes: 1

Related Questions