using each method in jquery

Question

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?

Could you add your button with the click event? I copied your code into this plunk we could use it as a base to find the solution. — surfmuggle
– surfmuggle, Commented Jul 13, 2013 at 21:31
You can add the button an the function that is executed here as well. I will update the plunk then. — surfmuggle
– surfmuggle, Commented Jul 13, 2013 at 21:50
problem is that I'm not getting data as I should. First checkbox is giving me a headache — user123_456
– user123_456, Commented Jul 13, 2013 at 21:55

surfmuggle · Accepted Answer · 2013-07-14 21:31:40Z

1

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.

edited Jul 14, 2013 at 21:31

answered Jul 13, 2013 at 22:57

surfmuggle

6,0408 gold badges58 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user123_456 Over a year ago

thank you for your code, however my problems is in the first checkbox which has value on and it is used to select all checkboxes. So when I iterate trough the selected options first index is value on but then my other loop is not working as it should. I need to skip the first checkbox...so I need to skip $(this).val()

surfmuggle Over a year ago

Could use a different selector? One for the first checkbox that selects or switches every of the following checkboxes? I will give you an example shortly

U.P · Accepted Answer · 2013-07-13 22:44:26Z

0

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

answered Jul 13, 2013 at 22:44

U.P

7,4527 gold badges42 silver badges63 bronze badges

Collectives™ on Stack Overflow

using each method in jquery

2 Answers 2

Update with one checkbox for all

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

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update with one checkbox for all

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

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

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