jquery javascript concatenate/variable issue - javascript

I have html table inside of a form tags.
When I click on the a cell inside of the table jquery gives me the “id” attr of the cell.
I save the “id” attr to a variable called id.
When I alert “id” the id shows:
alert(id); //outputs 39
However on the very next line I have
term1 = $form.find( "input[name='firstoneinput_" + id +"']").val();
alert(term1); //outputs undefinined // it should output input
value with name attribute
of "firstoneinput_39"
why is the alert outputting undefined. Btw I put real values in to the text fields also.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.post demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form action="comments.php" id="nameForm">
<table border='1'>
<tr>
<td><input type="text" class="hidden" name="firstoneinput_1_25" id="25" placeholder="firstoneinput_1_25"> </td>
<td> <input type="text" class="hidden" name="firsttwoinput_1_26" id="26" placeholder="firsttwoinput_1_26"></td>
</tr>
<tr>
<td> <input type="text" class="hidden" name="firstoneinput_2_27" id="27" placeholder="firstoneinput_2_27"> </td>
<td> <input type="text" class="hidden" name="firsttwoinput_2_28" id="28" placeholder="firsttwoinput_2_28"></td>
</tr>
<tr>
<td> <input type="text" class="hidden" name="firstoneinput_3_29" id="29" placeholder="firstoneinput_3_29"> </td>
<td> <input type="text" class="hidden" name="firsttwoinput_3_30" id="30" placeholder="firsttwoinput_3_30"></td>
</tr>
<tr>
<td> <input type="text" class="hidden" name="firstoneinput_4_31" id="31" placeholder="firstoneinput_4_31"> </td>
<td> <input type="text" class="hidden" name="firsttwoinput_4_32" id="32" placeholder="firsttwoinput_4_32"></td>
</tr>
</table>
<td> <input type="submit" value="search"></td>
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>
JAVASCRIPT
<script>
$(document).ready(function(){
var id = 0;
$('table tr td').click(function(){
id = $(this).children("input[class='hidden']").attr("id");
return id;
});
$( "#nameForm" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this );
term1 = $form.find( "input[name='firstoneinput_" + id +"']").val();
alert(term1); <---alerts undefined even thou I put in form values
alert(id); <----alerts ok the id

New answer
This will always alert undefined ...
alert(term1); // < ---alerts undefined even thou I put in form values
... because you're looking for firstoneinput_XX ...
$form.find( "input[name='firstoneinput_" + id +"']").val();
... but your actual input elements have the name convention firstoneinput_X_XX.
<input ... name="firsttwoinput_1_26" ... />
- - - Previous answer - - 8-< - - -
Html:
<form>
<table>
<tr>
<td id='39'>Klick</td>
</tr>
</table>
<input name="firstoneinput_39" value="the_uber_value"/>
</form>
Script:
$(document).ready(function() {
$('td').click(function() {
alert($('input[name="firstoneinput_' + this.id + '"]').val());
});
});
Magic:
http://jsfiddle.net/McNull/4BDmh/

Related

Why does validateForm display the whole table instead of the row (using JavaScript)?

I am trying to display email address and password for every employee by submitting their id, I used this code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function validateForm() {
var x = document.forms["myMail"]["rowId"].value;
if (x == "") {
alert("Please type a valid National ID");
return false;
}
}
</script>
</head>
<body>
<form name="myMail" action="teamId.html" onsubmit="return validateForm()" method="post">
National ID : <input type="number" name="rowId" required>
<input type="submit" value="Get my Mail">
</form>
</body>
</html>
but when submitting it displays the whole table not the row that contains the employee info
and this is the first row of the table
<td height=53 class=xl6455 width=64 style='height:39.95pt;width:48pt'>id</td>
<td class=xl6455 width=191 style='border-left:none;width:143pt'>National I.D</td>
<td class=xl6555 width=390 style='border-left:none;width:293pt'>Name</td>
<td class=xl6555 width=242 style='border-left:none;width:182pt'>E-mail
Address</td>
<td class=xl6555 width=221 style='border-left:none;width:166pt'>First time
only Password</td>
<td class=xl6555 width=200 style='border-left:none;width:150pt'>Level</td>
</tr>
<tr height=53 style='mso-height-source:userset;height:39.95pt'>
<td height=53 class=xl6455 style='height:39.95pt;border-top:none'>1</td>

How to append an inline template element with modified (id) content to another element?

Below in the example, I want that each time when the add button is clicked to take the element inside the template div and append it to the landingzone class element. But at the same time I need the NEWID to change for the new element. Of course this is just an example, the table stuff can be a div or anything else.
the form:
<form method="post">
<input type="text" name="title">
<input type="text" name="number">
<table>
<thead>
<tr> <th>Parts</th> </tr>
</thead>
<tbody class="landingzone">
</tbody>
</table>
<input type="submit" value="Save">
<input type="button" name"add" class="add" value="Save">
</form>
the template:
<div class="template" style="display: hidden">
<tr id="NEWID">
<td>
<input type="text" name="part_NEWID">
</td>
</tr>
</div>
What would be the best way to accomplish this?
Here's an example for your need. The javascript will work without changing any html except in place of name"add" should be name="add"
What i have done here is i'm getting the id of the template tr and setting it with increment and also the input field name.
var $landingzone = $('.landingzone');
var $add = $('.add');
var desiredId = 'id';
$add.on('click', function() {
var $template = $('.template').find('tr');
var id = $template.attr('id');
var idArr = id.split('-');
if (!idArr[1]) {
id = desiredId + '-1';
} else {
id = desiredId + '-' + (parseInt(idArr[1]) + 1);
}
$template.attr('id', id);
$template.find('input').attr('name', 'part_'+id);
console.log('input id--->'+id, 'input name--->'+'part_'+id);
$landingzone.append($template.clone());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<input type="text" name="title">
<input type="text" name="number">
<table>
<thead>
<tr>
<th>Parts</th>
</tr>
</thead>
<tbody class="landingzone">
</tbody>
</table>
<input type="submit" value="Save">
<input type="button" name="add" class="add" value="Add">
</form>
<table class="template" style="display: none">
<tr id="NEWID">
<td>
<input type="text" name="part_NEWID">
</td>
</tr>
</table>
Like #Andrea said in her comment, some more details would be appreciated ...
I think what you are after is:
const $template = $('.template').clone()
$template.attr('id', 'someId')
$template.find('input[name="part_NEWID"]').attr('name', 'part_someId')
$('.landingzone').append($template)
And if you need it in a function:
function appendTemplateToLandingZone (newId) {
const $template = $('.template').clone()
$template.attr('id', newId)
$template.find('input[name="part_NEWID"]').attr('name', 'part_' + newId)
$('.landingzone').append($template)
}
I haven't tested this, so it might need a slight adjustment. If you'll provide a basic jsbin I'll make it work there.

how to set unique name and id of HTML Table columns which are dynamically created using ajax

I am creating one JSP page in which there is a textfield and button. If user enters some integer value lets say 2 in textfield, then 2 rows will be appended in Html table at last. So the rows of HTML table are being created dynamically.
I am implementing this using ajax call to a page which has <tr> data which is to be added to the main table after last row.
Everything is working fine. Rows are created dynamically using ajax call. But the problem is that all rows added to table have same column name attributes.
Below is my code:
main JSP page:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
.table {
font-size: 11px;
}
#dailyTableDiv {
height: 70%;
overflow: scroll;
}
</style>
<script>
function addTask(){
var n=$("#dailytsks").val();
for(i=1;i<=n;i++){
$.ajax({url:"employeeSection/dailyTableRow.jsp",success:function(result){
$('#dailyTable tr:last').after(result);
}});
}
//------------------------------
// i am trying this code to set different names for different select box column.
//but this is not happenting.
for(i=1;i<=n;i++){
$("#chSelect").attr("name","chSelect"+i);
}
//------------------------------
}
function add1Row(){
$.ajax({url:"employeeSection/dailyTableRow.jsp",success:function(result){
$('#dailyTable tr:last').after(result);
}});
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="well">
<input type="text" id="dailytsks" name="dailytsks" /><input
type="button" name="addTsks" value="add" onclick="addTask();" /> <span
style="margin-left: 20px;"></span><input type="button" value="+"
id="add1" name="add1" onclick="add1Row();" /> <span
style="margin-left: 20px;"></span><input type="button" value="-"
id="minus" name="minus" />
</div>
</div>
<div class="container-fluid">
<div id="dailyTableDiv">
<table id="dailyTable" class="table table-bordered">
<thead>
<tr>
<th>Select</th>
<th>Date</th>
<th>Client Name</th>
<th>Task-Type</th>
<th>NBPE-Type</th>
<th>Task-Name</th>
<th>Planned-Hrs</th>
<th>Priority</th>
<th>Cross-Team</th>
<th>Current-Status</th>
<th>Is-Completed</th>
<th>Actual-Hrs</th>
<th>SMC-ID</th>
<th>SMC-URL</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
dailyTableRow.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<tr>
<!-- -------------------------------------------------------------------- -->
<!-- currently I am trying to set unique name for Select column only so i hv given it a ID -->
<td><input type="checkbox" id="chSelect" name="chSelect" /></td>
<!-- -------------------------------------------------------------------- -->
<td width="3"><input type="text" style="max-width: 80px;"
name="tskDate" /></td>
<td><select name="cliName">
<option>select client</option>
<option>RWS</option>
<option>Orgbase</option>
<option>RW-MAAS</option>
<option>WSO2</option>
</select></td>
<td><input type="checkbox" name="chTskType" />NBPE?</td>
<td><select name="tskNBPEType">
<option>select NBPE type</option>
<option>meeting</option>
<option>on leave</option>
<option>mom</option>
</select></td>
<td><input type="text" name="tskName" /></td>
<td><input type="text" style="max-width: 15px;" name="plndHrs" /></td>
<td><select name="tskPriority">
<option>select priority</option>
<option>low</option>
<option>med</option>
<option>high</option>
</select></td>
<td><input type="text" style="max-width: 80px;"
name="crosTeamMate" /></td>
<td><select name="curStatus">
<option>select status</option>
<option>on hold</option>
<option>in progress</option>
<option>completed</option>
</select></td>
<td><input type="radio" name="isCompleted" value="N">No <br>
<input type="radio" name="isCompleted" value="Y">Yes</td>
<td><input type="text" style="max-width: 15px;" name="actHrs" /></td>
<td><input type="text" style="max-width: 80px;" name="smcID" /></td>
<td><input type="text" style="max-width: 160px;" name="smcURL" /></td>
<td><textarea name="comment" rows="3" cols="10"></textarea></td>
</tr>
here all columns have same name which is wrong.
how can I make unique name attribute pairs for the column in rows which are added. Currently, as seen in the code I am only trying to set unique name attribute values to Select column only. But I am not able to do.
I want something like:
if name of column is "chSelect" then for two rows, it should become as :
chSelect1 & chSelect2, respectively.
This might help you
HTML:-
<input type="checkbox" name="chSelect" class="chSelect" />
<input type="checkbox" name="chSelect" class="chSelect" />
<input type="checkbox" name="chSelect" class="chSelect" />
JAVASCRIPT:-
var i = 0;
$('.chSelect').each(function () {
$(this).attr('name', "chSelect"+i);
i++;
});
LINK :-
https://jsfiddle.net/ft0uefaL/
The basic idea is to store the row number in a global variable that you'll increase each time you add a row via Ajax.
When your Ajax calls resolve, you parse the resulting html (result) using JQuery, change the name property of the chSelect element, and append the change to the last tr as you did previously:
// add a global variable to store row number
var row = 0;
function addTask(){
var n = $("#dailytsks").val();
var max = parseInt(n);
for(i=1; i<=max; i++){
$.ajax({
url: "employeeSection/dailyTableRow.jsp",
success: function(result){
row += 1
var newName = "chSelect" + row;
var html = $('<div>').append(result);
$(html).find("#chSelect").attr("name", newName)
$('#dailyTable tr:last')
.after( html.html() )
}
});
}
}
function add1Row(){
$.ajax({
url: "employeeSection/dailyTableRow.jsp",
success: function(result){
row += 1;
var newName = "chSelect" + row;
var html = $('<div>').append(result);
$(html).find("#chSelect").attr("name", newName)
$('#dailyTable tr:last')
.after( html.html() )
}
});
}

How to edit this dynamically input textarea javascription

I'm using this script to create a food & drinks menu, I just found this javascript on a website i don't know much about it but it works really well.
Im going to have a button to input entries for lots of different meal types, for example, Breakfast, Drinks, Dinner, Dessert etc etc.
How can i edit this so the textbox name is breakfast_selection[] or dinner_selection[]?
Also when i click the "Add Option" button, How can i have it so it says "Option 1: Textbox" then when they hit another textbox it says "Option 2: Textbox"
<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<SCRIPT language="javascript">
function add() {
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", "text");
element.setAttribute("name", "selection[]");
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
var br = document.createElement("br");
foo.appendChild(br);
}
</SCRIPT>
</head>
<body>
<form method="POST" action="testforms.php">
<p><b>Add a Menu Set</b></p>
<table border="0" width="100%" cellspacing="5" cellpadding="5">
<tr>
<td width="25%">Menu Set Name</td>
<td width="75%">
<p><input type="text" name="setname" size="50"></p>
</td>
</tr>
<tr>
<td width="25%"> </td>
<td width="75%"> </td>
</tr>
<tr>
<td width="25%"> </td>
<td width="75%"> </td>
</tr>
<tr>
<td width="100%" colspan="2"><b>Breakfast <INPUT type="button" value="Add Option" onclick="add(document.forms[0].text)"/></td>
</tr>
<tr>
<td width="100%" colspan="2">
<span id="fooBar"> </span>
</td>
</tr>
</table>
</form>
</body>
</html>
How can i edit this so the textbox name is breakfast_selection[] or dinner_selection[]?
Change
element.setAttribute("name", "selection[]");
to
element.setAttribute("name", "breakfast_selection[]");
Also when i click the "Add Option" button, How can i have it so it says "Option 1: Textbox" then when they hit another textbox it says "Option 2: Textbox"
Add a variable i to keep track of number of options. See the code below-
Update as per OP comment
Change
<td width="100%" colspan="2"><b>Breakfast <INPUT type="button" value="Add Option" onclick="add(document.forms[0].text)"/></td>
to
<td width="100%" colspan="2"><b>Breakfast <INPUT type="button" value="Add Option" onclick="add('breakfast')"/><br>
Lunch <INPUT type="button" value="Add Option" onclick="add('lunch')"/></td>
Update the script
<SCRIPT language="javascript">
var i = 1;
function add(orderType) {
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", "text");
element.setAttribute("name", orderType + "_selection[]");
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
//Create the option text
var a = document.createTextNode("option " + i + ": ");
foo.appendChild(a);
foo.appendChild(element);
var br = document.createElement("br");
foo.appendChild(br);
i++;
}
</SCRIPT>
See demo at JSFiddle

JQuery Checkboxes Group check

All,
I have the following code. How can I fix it so that the category checkbox for each category is checked only if all the items under that are checked?
Thanks
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>
<script language="JavaScript">
function toggleTableRows()
{
$(document).ready(function() {
$('img.parent')
.css("cursor","pointer")
.toggle(
function() {
$(this).attr("title","Click to Collapse")
$(this).attr("src","arrow_expanded.gif");
$('tr').siblings('#child-'+this.id).toggle();
},
function() {
$(this).attr("title","Click to Expand");
$(this).attr("src","arrow_collapsed.gif");
$('tr').siblings('#child-'+this.id).toggle();
}
);
initCheckBoxes();
});
}
function toggleCheckboxes(current, form, field) {
$(document).ready(function() {
$("#"+ form +" :checkbox[name^='"+ field +"[']").attr("checked", current.checked);
});
}
function toggleParentCheckboxes(current, form) {
var checked = ($("#"+ form +" :checkbox[name='"+ current.name +"']").length == $("#"+ form +" :checkbox[name='"+ current.name +"']:checked").length);
// replace '[anything]' with '' instead of just '[]'
$("#"+ form +" :checkbox[name='"+ current.name.replace(/\[[^\]]*\]/, "") +"']").attr("checked", checked);
}
function initCheckBoxes(form) {
$("#"+ form +" :checkbox:checked").each(function() {
if (this.name.match(/chk[0-9]\[.*\]/)) {
toggleParentCheckboxes(this, form);
}
});
}
</script>
<script language="JavaScript">toggleTableRows();</script>
</head>
<body>
<form name="frmDinnerMenu" id="frmDinnerMenu" method="POST" action="">
<table border=1>
<tr>
<td><img class="parent" id="0" src="arrow_collapsed.gif" title="Click to Expand">Category - Fruits</td>
<td><input type="checkbox" name="chk0" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk0');"/></td>
</tr>
<tr style="display: none;" id="child-0">
<td> Apple</td>
<td><input type="checkbox" value="0" name="chk0[1]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr style="display: none;" id="child-0">
<td> Banana</td>
<td><input type="checkbox" checked value="0" name="chk0[2]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr style="display: none;" id="child-0">
<td> Orange</td>
<td><input type="checkbox" checked value="0" name="chk0[5]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr><td><img class="parent" id="1" src="arrow_collapsed.gif" title="Click to Expand">Category - Vegetables</td><td><input type="checkbox" name="chk1" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk1');"/></td></tr>
<tr style="display: none;" id=child-1><td> Cabbage</td><td><input type="checkbox" checked value="0" name="chk1[21]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td></tr>
<tr style="display: none;" id=child-1><td> Tomatoes</td><td><input type="checkbox" value="0" name="chk1[26]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td></tr>
<tr style="display: none;" id=child-1><td> Green Peppers</td><td><input type="checkbox" checked value="0" name="chk1[29]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td></tr>
</table>
</form>
</body>
</html>
gave it a try + some notes which you really should apply too
Some things I fixed to be able to work with this thing
missing title attribute in head (added)
Both img-tags have invalid numeric-only id (changed to make a valid id)
Multiple tr's with id child-0 (made ids unique but still based on img id)
Multiple tr's with id child-1 (made ids unique but still based on img id)
alt attribute on both img-tags missing (added)
too-many inline javascript onclick handlers (removed/ replaced with jQuery bindings and jQuery to find right parameters)
too-many inline css on some tr's (removed/replaced with css class)
missing type attribute on the script tags (added)
initcheckboxes is called without parameter, thus won't work as selector (added param to toggleTableRows)
made some of the jQuery foo more flexible and robust
Fixed HTML + javascript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html;charset=ascii">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>
<script type="text/javascript" language="JavaScript">
function toggleTableRows(form) {
$(document).ready(function() {
$('img.parent')
.css("cursor","pointer")
.toggle(function() {
var x = $(this);
x.attr("title","Click to Collapse")
.attr("src","arrow_expanded.gif");
x.parents("tr").eq(0).siblings("[id^=child-"+x.attr("id")+"]").toggle();
}, function() {
var x = $(this);
x.attr("title","Click to Expand")
.attr("src","arrow_collapsed.gif");
x.parents("tr").eq(0).siblings("[id^=child-"+x.attr("id")+"]").toggle();
});
initCheckBoxes(form);
});
}
function toggleCheckboxes(current, form, field) {
$(document).ready(function() {
$("#"+ form +" input:checkbox[name^='"+ field +"[']").attr("checked", current.checked);
});
}
function toggleParentCheckboxes(current, form) {
var name = current.name.replace(/\[[^\]]*\]/, "");
var selected = $("input:checkbox[name^='" + name + "[']");
var checked = (selected.size() == selected.filter(":checked").size());
$("#"+ form +" :checkbox[name='" + name + "']").attr("checked", checked);
}
function initCheckBoxes(form) {
$("#"+ form +" input:checkbox:checked").each(function() {
if (this.name.match(/chk[0-9]\[.*\]/)) {
toggleParentCheckboxes(this, form);
}
});
}
</script>
<script type="text/javascript" language="JavaScript">toggleTableRows("frmDinnerMenu");</script>
<script type="text/javascript">
$(document).ready(function() {
$("tr:not([id]) input").click(function() {
var ele = $(this);
toggleCheckboxes(this, ele.parents("form").eq(0).attr("name"), ele.attr("name"));
ele=null;
});
$("tr[id] input").click(function() {
toggleParentCheckboxes(this, $(this).parents("form").eq(0).attr("name"))
});
});
</script>
<style type="text/css">tr.c1 {display: none;}</style>
</head>
<body>
<form name="frmDinnerMenu" id="frmDinnerMenu" method="post" action="">
<table border="1">
<tr>
<td><img class="parent" id="i0" src="arrow_collapsed.gif" alt="fruits" title="Click to Expand" name="0">Category - Fruits</td>
<td><input type="checkbox" name="chk0"></td>
</tr>
<tr class="c1" id="child-i00">
<td>Apple</td>
<td><input type="checkbox" value="0" name="chk0[1]"></td>
</tr>
<tr class="c1" id="child-i01">
<td>Banana</td>
<td><input type="checkbox" checked value="0" name="chk0[2]"></td>
</tr>
<tr class="c1" id="child-i02">
<td>Orange</td>
<td><input type="checkbox" checked value="0" name="chk0[5]"></td>
</tr>
<tr>
<td><img class="parent" id="i1" src="arrow_collapsed.gif" alt="vegetable" title="Click to Expand" name="1">Category - Vegetables</td>
<td><input type="checkbox" name="chk1"></td>
</tr>
<tr class="c1" id="child-i10">
<td>Cabbage</td>
<td><input type="checkbox" checked value="0" name="chk1[21]"></td>
</tr>
<tr class="c1" id="child-i11">
<td>Tomatoes</td>
<td><input type="checkbox" value="0" name="chk1[26]"></td>
</tr>
<tr class="c1" id="child-i12">
<td>Green Peppers</td>
<td><input type="checkbox" checked value="0" name="chk1[29]"></td>
</tr>
</table>
</form>
</body>
</html>
So I'm going to try and answer this question (hey, it's a challenge!).
First let me point out why people don't like your question though:
Duplicate ids: id=child-1 appears multiple times, as do others. Ids should be unique, otherwise you'll run into selector problems (getElementById really doesn't like it)
Inline javascript: It's hard to determine from looking at the code what actions happen when. You should isolate all functionality in a separate script file. This will make maintenance significantly easier in the future, and allow the browser to cache functionality.
&nbsp&nbsp&nbsp&nbsp .... consider using "padding-left: 15px". Do it for us.
That all being said, consider using a more targeted selector. In this example, notice name^=
function toggleParentCheckboxes(current, form) {
var name = current.name.replace(/\[[^\]]*\]/, "");
var selector = ":checkbox[name^='" + name + "[']";
var checked = ($(selector).length == $(selector + ":checked").length);
$("#"+ form +" :checkbox[name='" + name + "']").attr("checked", checked);
}

Categories