Jquery Selecting Table Rows with Checkbox

Question

I have a table as

<table id="rowclick2">
  <tbody>
    <tr >
      <td class="cb"><input type="checkbox" value="yes"></td>
      <td>row 1</td>
       <td>A</td>
    </tr>    
    <tr >
      <td class="cb"><input type="checkbox" value="yes" ></td>
      <td>row 2</td>
       <td>B</td>
    </tr>    
    <tr>
      <td class="cb"><input type="checkbox" value="yes"></td>
      <td>row 3</td>
      <td>C</td>  
    </tr>    
  </tbody>
</table>

where I want to get each cell (when the button is clicked) in a row whose checkboxes are checked

I tried filter

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

      $('#rowclick2 tr').filter(':has(:checkbox:checked)').each(
          //get row values
      );
    });

It's pretty simple yet I can't see what I am missing...

Here is the jsfiddle link...

jensgram · Accepted Answer · 2011-03-25 08:59:01Z

40

You're almost there :)

If you want all <td> s in rows where the checkbox is checked:

$('#rowclick2 tr').filter(':has(:checkbox:checked)').find('td');

E.g.:

$('#rowclick2 tr').filter(':has(:checkbox:checked)').find('td').each(function() {
    // this = td element
});

More elaborate example is on JsFiddle.

BTW
The .filter(':has(:checkbox:checked)') can be written as .has(':checkbox:checked') if you, like me, find that easier to read.

edited Mar 25, 2011 at 8:59

answered Mar 25, 2011 at 8:53

jensgram

31.6k6 gold badges83 silver badges101 bronze badges

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

3 Comments

add9 Over a year ago

one more simple question :) now i get all td's how do i modify this so that each selects specific cells. ie. only to get A B C

add9 Over a year ago

$('#rowclick2 tr').filter(':has(:checkbox:checked)').each(function() { alert($(this).find("td").eq(2).html()); }); }); is any good? or there exists a better way?

jensgram Over a year ago

@imellam $('#rowclick2 tr').has(':checkbox:checked').find('td:eq(2)') should do (demo).

SubniC · Accepted Answer · 2011-03-25 08:54:51Z

3

You can try this code:

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

    $('td.cb:checked').parents('tr').each(
          //get row values
      );
}

HTH!

answered Mar 25, 2011 at 8:54

SubniC

10.4k4 gold badges30 silver badges33 bronze badges

Comments

Arpit Pithadia · Accepted Answer · 2015-07-15 10:08:34Z

// select row and check box function condition
        $('#file_module_mainTableId').on('click', 'tbody tr', function(e){
            //e.preventDefault();
            var $this = $(this);
            // Detecting ctrl (windows) / meta (mac) key.
            if (e.ctrlKey || e.metaKey)
            {
                if($this.hasClass('ui-selected')){
                    $this.removeClass('ui-selected');
                    $this.find('input[type=checkbox]').removeAttr('checked');
                    if (e.target.type !== 'checkbox') {
                        $(':checkbox', this).trigger('click');
                    }
                }else{
                    $this.addClass('ui-selected')
                    $this.find('input[type=checkbox]').attr('checked', 'checked');
                }
            }
            // Detecting shift key
            else if (e.shiftKey)
            {
                // Get the first possible element that is selected.
                var currentSelectedIndex = $('#file_module_mainTableId tbody tr.ui-selected').eq(0).index();
                // Get the shift+click element
                var selectedElementIndex = $('#file_module_mainTableId tbody tr').index($this);
                // Mark selected between them
                if (currentSelectedIndex < selectedElementIndex)
                {
                    for (var indexOfRows = currentSelectedIndex; indexOfRows <= selectedElementIndex; indexOfRows++)
                    {
                         $('#file_module_mainTableId tbody tr').eq(indexOfRows).addClass('ui-selected');
                         $('#file_module_mainTableId tbody tr').eq(indexOfRows).find('input[type=checkbox]').attr('checked', 'checked');
                    }
                }
                else
                {
                    for (var indexOfRows = selectedElementIndex; indexOfRows <= currentSelectedIndex; indexOfRows++)
                    {
                         $('#file_module_mainTableId tbody tr').eq(indexOfRows).addClass('ui-selected');
                         $('#file_module_mainTableId tbody tr').eq(indexOfRows).find('input[type=checkbox]').attr('checked', 'checked');
                    }
                }    
            }
            else
            {
                if (e.target.type !== 'checkbox') {
                    $(':checkbox', this).trigger('click');
                }
            }
        });
        // checkbox class section  
        $(".chkbox").change(function(e){
            if ($(this).is(":checked")){
                $(this).closest('tr').addClass("ui-selected");
            } else {
                $(this).closest('tr').removeClass("ui-selected");
            }
        });
        // clrt + A select all table row 
        $(document).on('keydown', function(e){
            if(!$('body').hasClass('.modal-open')){ // use this condition for modal - deprecated here
                if(e.metaKey || e.ctrlKey && e.keyCode == 65){
                    $('#file_module_mainTableId tbody tr').addClass('ui-selected');
                    $('#file_module_mainTableId tbody tr').find('input[type=checkbox]').attr('checked', 'checked');
                    e.preventDefault();
                    return false;
                }
            }
        });

Collectives™ on Stack Overflow

Jquery Selecting Table Rows with Checkbox

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related