We help IT Professionals succeed at work.

JQuery - return two values

BILL Carlisle
on
How do I use JQuery to get the checked records only?
row 2 is checked I want value "1234" and "Michael Borak (1234)"

just in alerts would be good...
<table cellpadding="0" border="0" cellspacing="0" summary="" class="t20Report t20Standard">
<tr><td>
<table cellpadding="0" border="0" cellspacing="0" summary="" class="t20Report t20Standard">
<td  headers="" class="t20data">
  <input type="checkbox" name="f01" value="9876"  /></td>
<td  headers="Sender's Name" class="t20data">Joe Carlisle (Z04834)</td>
<td  headers="Email" class="t20data">jcarlisle@dddd.com</td></tr>
<tr >
  <td  headers="" class="t20data">
     <input type="checkbox" name="f01" value="1234"  /></td>
  <td  headers="Sender's Name" class="t20data">Michael Borak (2345)</td>
  <td  headers="Email" class="t20data">mborak@ddddd.com</td></tr>
<tr >
  <td  headers="" class="t20data">
    <input type="checkbox" name="f01" value="924666"  /></td>
  <td  headers="Sender's Name" class="t20data">Harry Jones (6778)</td>
  <td  headers="Email" class="t20data">sss@xxx</td></tr>
</table>

</td></tr>
</table>

Open in new window

Comment
Watch Question

I think this should do the teick, but you need to associate the name with the input somehow so i sujest adding a titlte attribute to each of those inputs/checkboxes with the name related inside.
e.g. <input type="checkbox" name="f01" value="9876" title="Joe Carlisle" />
Oops, missed the jquery code there...
*teick -> trick
$("input[type=checkbox][checked]").each(function() {
    
    alert( 'Value: ' + this.value + ', Name: ' + this.title );
});

Open in new window

leakim971Multitechnician
Distinguished Expert 2019

Commented:
Use :
$("input[type='checkbox']:checked").each(function() {
and get values of :

$(this).val()
and
$(this).parent().parent().children().eq(1).html()

test page :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#getChecked").click(function() {
			$("input[type='checkbox']:checked").each(function() {
				alert( $(this).val() );
				alert( $(this).parent().parent().children().eq(1).html() );
			});
		});
	});
</script>
</head>
<body>
<input type="button" id="getChecked" value="Get Checked" />
<table cellpadding="0" border="0" cellspacing="0" summary="" class="t20Report t20Standard">
    <tr>
    	<td><table cellpadding="0" border="0" cellspacing="0" summary="" class="t20Report t20Standard">
        		<tr>
			    	<td headers="" class="t20data"><input type="checkbox" name="f01" value="9876"  /></td>
    				<td headers="Sender's Name" class="t20data">Joe Carlisle (Z04834)</td>
   		 			<td headers="Email" class="t20data">jcarlisle@dddd.com</td>
			    </tr>
    			<tr>
				    <td  headers="" class="t20data"><input type="checkbox" name="f01" value="1234"  /></td>
    				<td  headers="Sender's Name" class="t20data">Michael Borak (2345)</td>
    				<td  headers="Email" class="t20data">mborak@ddddd.com</td>
                </tr>
			    <tr>
    				<td headers="" class="t20data"><input type="checkbox" name="f01" value="924666"  /></td>
				    <td headers="Sender's Name" class="t20data">Harry Jones (6778)</td>
    				<td headers="Email" class="t20data">sss@xxx</td>
                </tr>
		    </table>
    	</td>
	</tr>
</table>
</body>
</html>

Open in new window

BILL CarlisleAPEX Developer

Author

Commented:
when you see if the first item is checked then don't I need to go up to the tr and then get the second item's text() ??

I have gotten the checked input item's value alright but then I need the next cell's text

I could put the next cell's text in a hidden and a span if that makes it easier but I still don't know how to go up to the TR tag then filter on the f03 id.
<input type="hidden" name="f03" value="Joe Carlisle (Z04834)" /><span>Bill Carlisle (9876)</span>
Multitechnician
Distinguished Expert 2019
Commented:
>when you see if the first item is checked then don't I need to go up to the tr and then get the second item's text() ??

checkbox : $(this).val()
second item's text() : $(this).parent().parent().children().eq(1).html()
Just add the text into a spare attribute on the checkbox input, e.g. the "title" attribute is not in use so you could use that attribute.
BILL CarlisleAPEX Developer

Author

Commented:
Thank you!
I didn't see your first example of this until now...
I had spent way to long playing with this - should have asked sooner!
I love Experts Exchange!