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!

$('tr input:checkbox').is(':checked')

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

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.

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>

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

:) nice work

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.