Member Avatar for bunnyboy

Hello!

I'm having problem with getting the checkbox state of a selected row inside table. I don't know if there is any specific function to determinate which row is selected so I've thought of the following... when the row is selected, style(background color) is applied to the tr element, so I thought that I could looked for the tr element which has that style and extracted checkbox state from it ... but because I lack of knowledge of jQuery I stucked.

An example of that would be ...

<table>
	<tr>
		<td>Text</td>
                <td>Text</td>
                <td>Text</td>
		<td><input type="checkbox"/></td>
		<td>Text</td>
	</tr>
	<tr style="background-color:LightBlue;">
		<td>Text</td>
                <td>Text</td>
                <td>Text</td>
		<td><input type="checkbox" checked /></td>
		<td>Text</td>
	</tr>
	<tr>
		<td>Text</td>
                <td>Text</td>
                <td>Text</td>
		<td><input type="checkbox"/></td>
		<td>Text</td>
	</tr>
</table>

If we assume now that second row is selected, how would I get the state of the checkbox(checked, unchecked)?

Thanks for any help!

Edited by bunnyboy because: n/a
  • 3 Contributors
  • 6 Replies
  • 3K Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by migcosta

Recommended Answers

All 6 Replies

Member Avatar for twiss 
$('tr input:checkbox').is(':checked')
Member Avatar for bunnyboy

But I am interested only in checkbox that is in a row which style is "style="background-color:LightBlue;"" ...

Member Avatar for twiss

Ah. I advice you to give it a class. But you could do:

$('tr[style="background-color:LightBlue;"] input:checkbox').is(':checked')

Not tested - it might be that some browsers convert it to hex first.

Member Avatar for migcosta

bunnyboy.. what about if you start to give id's to your checkbox's? :)

I think you want this:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.checked_td{background-color:LightBlue;}
td{ cursor:pointer;}
</style>
</head>

<body>

<table>
	<tr>
		<td>Text</td>
                <td>Text</td>
                <td>Text</td>
		<td>Text</td>
	</tr>
	<tr class="checked_td">
		<td>Text</td>
                <td>Text</td>
                <td>Text</td>
		<td>Text</td>
	</tr>
	<tr>
		<td>Text</td>
                <td>Text</td>
                <td>Text</td>
		<td>Text</td>
	</tr>
</table>
<script >
$('table tr').live('click',function() {
	if( $(this).hasClass('checked_td')){
		$(this).removeClass('checked_td')
	}else{
		$(this).addClass('checked_td')
	}
})

</script>
</body>
</html>
Member Avatar for bunnyboy

This is what I wanted to achieve ... sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#btnSubmit').click(function() {
				var value = $('#testTable tr[class="selected"] input:checkbox').is(':checked');
				alert("Is checkbox in current selected row checked? [ " + value + " ]");
			}); 
			
			$("#testTable").delegate("tr", "click", function() {
				$(this).addClass("selected").siblings().removeClass("selected");
			});
		});
	</script>
	<style type="text/css">
		.selected td { background-color:#add8e6; }
		table { width:100%; border-collapse:collapse; margin:1em 0;}
		th, td { text-align:center; padding:.5em; border:1px solid #fff;}
		td { background:#e5f1f4; }
	</style>
</head>
<body>
	<table id="testTable">
		<tr>
			<td>Text</td>
			<td>Text</td>
			<td>Text</td>
			<td><input type="checkbox" /></td>
			<td>Text</td>
		</tr>
		<tr>
			<td>Text</td>
			<td>Text</td>
			<td>Text</td>
			<td><input type="checkbox"/></td>
			<td>Text</td>
		</tr>
		<tr>
			<td>Text</td>
			<td>Text</td>
			<td>Text</td>
			<td><input type="checkbox" /></td>
			<td>Text</td>
		</tr>
	</table>
	<br />
	<div align="center">
		<input id="btnSubmit" type="button" value="Get Selected Row Checkbox State" />
	</div>
</body>
</html>

Thanks both of you for guidance! ;P

Edited by bunnyboy because: n/a
Member Avatar for migcosta

:) nice work

Edited by migcosta because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.