why does this chain not work?
Hi
I am new to Jquery and having some problems
I am using C# code to dynamically make 11 rows of 6 cells in a table.
The first cell of the table contains a checkbox that has the ability to check the remaining 5 checkboxes in that row.
So thats what I am trying to write right now a function that can do this.
Here is my html generated code
<
-
!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><title>
</title>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<link href="Stylesheet1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function()
{
$("p").addClass("test");
$("#button1").click(function()
{
getValues();
});
$("td.selectEntireRow").click(function()
{
if ($(this).siblings("input:checkbox:checked"))
{
$(this).siblings(" input:checkbox").attr("checked", true);
}
else
{
$(this).siblings(" input:checkbox").attr("checked", false);
}
});
});
function getValues()
{
var fields = $(":checked");
jQuery.each(fields, function(i, field)
{
$("#targetDiv").append(field.value + " ");
});
}
</script>
</head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="" />
</div>
<div>
<div id="Panel1">
<table id="myTable" border="0">
<tr>
<td class="selectEntireRow"><input id="ctl04" type="checkbox" name="ctl04" Value="a.gif" /></td><td><input id="ctl05" type="checkbox" name="ctl05" /></td><td><input id="ctl06" type="checkbox" name="ctl06" /></td><td><input id="ctl07" type="checkbox" name="ctl07" /></td><td><input id="ctl08" type="checkbox" name="ctl08" /></td><td><input id="ctl09" type="checkbox" name="ctl09" /></td>
</tr><tr>
<td class="selectEntireRow"><input id="ctl10" type="checkbox" name="ctl10" Value="a.gif" /></td><td><input id="ctl11" type="checkbox" name="ctl11" /></td><td><input id="ctl12" type="checkbox" name="ctl12" /></td><td><input id="ctl13" type="checkbox" name="ctl13" /></td><td><input id="ctl14" type="checkbox" name="ctl14" /></td><td><input id="ctl15" type="checkbox" name="ctl15" /></td>
</tr><tr>
<td class="selectEntireRow"><input id="ctl16" type="checkbox" name="ctl16" Value="a.gif" /></td><td><input id="ctl17" type="checkbox" name="ctl17" /></td><td><input id="ctl18" type="checkbox" name="ctl18" /></td><td><input id="ctl19" type="checkbox" name="ctl19" /></td><td><input id="ctl20" type="checkbox" name="ctl20" /></td><td><input id="ctl21" type="checkbox" name="ctl21" /></td>
</tr><tr>
<td class="selectEntireRow"><input id="ctl22" type="checkbox" name="ctl22" Value="a.gif" /></td><td><input id="ctl23" type="checkbox" name="ctl23" /></td><td><input id="ctl24" type="checkbox" name="ctl24" /></td><td><input id="ctl25" type="checkbox" name="ctl25" /></td><td><input id="ctl26" type="checkbox" name="ctl26" /></td><td><input id="ctl27" type="checkbox" name="ctl27" /></td>
</tr><tr>
<td class="selectEntireRow"><input id="ctl28" type="checkbox" name="ctl28" Value="a.gif" /></td><td><input id="ctl29" type="checkbox" name="ctl29" /></td><td><input id="ctl30" type="checkbox" name="ctl30" /></td><td><input id="ctl31" type="checkbox" name="ctl31" /></td><td><input id="ctl32" type="checkbox" name="ctl32" /></td><td><input id="ctl33" type="checkbox" name="ctl33" /></td>
</tr><tr>
<td class="selectEntireRow"><input id="ctl34" type="checkbox" name="ctl34" Value="a.gif" /></td><td><input id="ctl35" type="checkbox" name="ctl35" /></td><td><input id="ctl36" type="checkbox" name="ctl36" /></td><td><input id="ctl37" type="checkbox" name="ctl37" /></td><td><input id="ctl38" type="checkbox" name="ctl38" /></td><td><input id="ctl39" type="checkbox" name="ctl39" /></td>
</tr><tr>
<td class="selectEntireRow"><input id="ctl40" type="checkbox" name="ctl40" Value="a.gif" /></td><td><input id="ctl41" type="checkbox" name="ctl41" /></td><td><input id="ctl42" type="checkbox" name="ctl42" /></td><td><input id="ctl43" type="checkbox" name="ctl43" /></td><td><input id="ctl44" type="checkbox" name="ctl44" /></td><td><input id="ctl45" type="checkbox" name="ctl45" /></td>
</tr><tr>
<td class="selectEntireRow"><input id="ctl46" type="checkbox" name="ctl46" Value="a.gif" /></td><td><input id="ctl47" type="checkbox" name="ctl47" /></td><td><input id="ctl48" type="checkbox" name="ctl48" /></td><td><input id="ctl49" type="checkbox" name="ctl49" /></td><td><input id="ctl50" type="checkbox" name="ctl50" /></td><td><input id="ctl51" type="checkbox" name="ctl51" /></td>
</tr><tr>
<td class="selectEntireRow"><input id="ctl52" type="checkbox" name="ctl52" Value="a.gif" /></td><td><input id="ctl53" type="checkbox" name="ctl53" /></td><td><input id="ctl54" type="checkbox" name="ctl54" /></td><td><input id="ctl55" type="checkbox" name="ctl55" /></td><td><input id="ctl56" type="checkbox" name="ctl56" /></td><td><input id="ctl57" type="checkbox" name="ctl57" /></td>
</tr><tr>
<td class="selectEntireRow"><input id="ctl58" type="checkbox" name="ctl58" Value="a.gif" /></td><td><input id="ctl59" type="checkbox" name="ctl59" /></td><td><input id="ctl60" type="checkbox" name="ctl60" /></td><td><input id="ctl61" type="checkbox" name="ctl61" /></td><td><input id="ctl62" type="checkbox" name="ctl62" /></td><td><input id="ctl63" type="checkbox" name="ctl63" /></td>
</tr><tr>
<td class="selectEntireRow"><input id="ctl64" type="checkbox" name="ctl64" Value="a.gif" /></td><td><input id="ctl65" type="checkbox" name="ctl65" /></td><td><input id="ctl66" type="checkbox" name="ctl66" /></td><td><input id="ctl67" type="checkbox" name="ctl67" /></td><td><input id="ctl68" type="checkbox" name="ctl68" /></td><td><input id="ctl69" type="checkbox" name="ctl69" /></td>
</tr>
</table>
</div>
<input type="button" value="test" id="button1" />
<a href="">link</a>
<div id="Panel2">
</div>
<p>g</p>
</div>
<div id="targetDiv">
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="" />
</div></form>
</body>
</html>
Now here is the function what I am trying to write
-
$(function()
{
$("td.selectEntireRow").click(function()
{
if ($(this).siblings("input:checkbox:checked"))
{
$(this).siblings(" input:checkbox").attr("checked", true);
}
else
{
$(this).siblings(" input:checkbox").attr("checked", false);
}
});
});
But this does not work and I don't understand why.
To me this is what my statement says.
First it checks the if condition. If "this"(what ever the incoming name is) has a child that is a input checkbox that is checked.
Then go into the if statement
This works.
Now the inside of the statment does not.
To me it says. "this(again whatever the incoming name is) has a child(ren) that is a input checkbox change that checkbox state to true.
However this is not working.