CODEWITHSUNDEEP
javascriptjqueryeach
user123_456
user123_456

Reputation: 5805

using each method in jquery

I have a table which has input checkboxes.

When user selects checkbox I'm saving this value attribute to an array...so the user is clicking, checking and unchecking and after some time he will press the button.

In the button click event I'm trying to iterate through each of the records and check if the each input[type="checkbox"] has the same value as the one in the array, so if the values are the same then I will read all the td values from that row.

This is my code:

$('#something').click(function(){
$( "tr td input" ).each(function(index) {
   //selected is an array which has values collected from the checked checkboxes..for example [2,3]
   for(var i=0;i<selected.length;i++)
   {
    if($(this).val()==selected[i][0].value)
    {
            alert($('tr').eq(index).find('td').eq(1).text());
    }
   }
});
});

And html code:

<table>
    <tbody>
    <tr>
        <td><input type="checkbox" value="on"></td>
        <td>ID</td>
        <td>Name</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="0"></td>
        <td>1</td>
        <td>John</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="1"></td>
        <td>2</td>
        <td>Steve</td>
    </tr>
    </tbody>
</table>

So for example if I have value [1] in the array. How can I get all the row information from that? My code is not working. Any idea?

Upvotes: 0

Views: 190

Answers (2)

surfmuggle
surfmuggle

Reputation: 5954

I created a plunk that iterates over each input, reads the values and writes them to an array:

  var checkBoxCollection = new Array();
  var cb = {};

  $("button").click(function(){      

        $("input").each(function(index, el){

          id = $(el).attr("id");
          val = $(el).val();
          isChecked = $(el).is(':checked');
          console.log(index, id, val);
          checkBoxCollection.push({'id': id, 'val': val, 'isChecked': isChecked});
        }); // each
        console.log(checkBoxCollection);
    }); // button.click

You could use this way to select the cell value as soon as the button is clicked and would only have to test if the box was checked. To learn how to use the console and the chrome dev tools you may take a look at this 7 minute video

Update with one checkbox for all

In my updated plunk you can see that i use two different selectors

// using different selector - see my comment and tell me if you can not do that
Select all <input class="cbAll" type="checkbox" id="cbAll" value="on">
// and each checkbox like this
<input class="cb" type="checkbox" id="cb0" value="0">

And the javascript

  $("input.cbAll").click(function(){
    $("input.cb").each(function(index, el){
      // javascript ternary operator is optional this switches each checked state
      $(el).is(':checked') 
        ? $(el).prop('checked', false)
        : $(el).prop('checked', true);
    }); // each
  });

Update including the copy of the text inside the <td>

In this plunk the text from the cells in the same tablerow of the checbox is copied into the array. The relevant code are these lines

  isChecked = $(el).is(':checked');
  if(isChecked){
    var cells = $(el).parent().parent().children(); 
    var cellId = cells.eq(1).text();
    var cellName = cells.eq(2).text();
    checkBoxCollection.push({'id': id, 'val': val
              , 'isChecked': isChecked
              , 'cellId': cellId
              , 'cellName': cellName});
    console.log(index, id, val, cellId, cellName);
  }

In the screenshot you can see that the values of each checked textbox are copied.

enter image description here

As far as i can tell i solved all your questions:

  • use of jquery each to iterate over checkboxes
  • copy the text of cells within a tablerow into an array if the checkbox of that row is checked

If i understood your questions not fully please clarify what you would like to know.

Upvotes: 1

U.P
U.P

Reputation: 7442

It appears that the condition if($(this).val()==selected[i][0].value) is not true.

If it is a simple array, you don't need .value in the end. Simply compare with selected[i][0]

if($(this).val()==selected[i][0])

Upvotes: 0

Related Questions