CODEWITHSUNDEEP
javascriptjquerycheckbox
Maverick
Maverick

Reputation: 2022

Get the Checked and Unchecked table data via jquery

I am creating a table at run time using Jquery and binding the unique id to the checkbox.

  $.getJSON('/api/Test/SelectionList' + '/' + ID)
   .done(function (data) {          
       $.each(data, function (key, val) {
           var myRow = $("<tr/>");
           //$("<td> <input type='checkbox' ></input>   </td>").text(val.IsActive).appendTo($(myRow));
           var items = "";
           items += '<input type="checkbox" id=' + val.FacilityID + ' ';             
           if (val.IsSelected) {
               items += 'checked/>';
           }
           else {
               items += '/>';
           }
           //$("<td/>").text(val.IsActive).appendTo($(myRow));
           $("<td> " + items + "</td>").appendTo($(myRow));
           $("<td/>").text(val.Facilityname).appendTo($(myRow));
           $("<td/>").text(val.RegionName).appendTo($(myRow));
           $("<td/>").appendTo($(myRow));
           myRow.appendTo($("#Table"));
       });

   })

User can check and uncheck the checkboxex, On click of save i want to store the value of (table) all check boxex with checked/unchecked state with the ID. I want to loop through the full table, and store the data as id@1 for checked box and id@0 for unchecked box in a same array. I am bit new to jquery, So not getting the syntax. Please suggest.

Upvotes: 0

Views: 1512

Answers (2)

suren
suren

Reputation: 981

Updated, here is the fiddle http://jsfiddle.net/MQQSv/1/

<table>
   <tr>
    <td>one</td>
    <td>
    <input type="checkbox" id='1'  checked/></td> 
   </tr>
   <tr>
    <td>two</td>
    <td>
    <input type="checkbox" id='2' /></td>
   </tr>
</table>

$('#save-btn').on('click', function() {
    var output = []
 $("table td input[type=checkbox]").each(function(){
   id = $(this).attr("id");
   output.push( id + "@" + ($(this).is(":checked") ? "1" : "0"))
  })
  console.log(JSON.stringify(output));
})

Upvotes: 1

Chen-Tsu Lin
Chen-Tsu Lin

Reputation: 23214

you can try this : push id into two different array 

$(document).ready(function() {

    // bind click event to save-btn 
    $('#save-btn').on('click', function() {

        // init two array 
        // (if you want to use var out of on's callback function, you need to do declaration outside)    
        var checkedList = [],
            uncheckedList = [];

        // push ckecked id into checkedList
        $('input:checked').each(function() {
            checkedList.push($(this).attr('id'));
        });

        // push unckecked id into uncheckedList
        $('input').not(':checked').each(function() {
            uncheckedList.push($(this).attr('id'));
        });
    });
});

Upvotes: 0

Related Questions