I have an HTML document that is generated on the server side using JSP. The output that is produced lists a number of records as HTML. Each record contains a single master record and each master record is associated with several child records.
The master record is displayed in one row with a small icon next to the record id. When clicked, the record expands and the child records are displayed (i.e a DIV layer is made visible). Here is an example HTML output of the HTML.
<!-- Record 1 -->
<tr class="d1">
<td width="9%" align="left"><input type="checkbox" name="master" value=352></td>
</tr>
<tr>
<td colspan="8">
<table class="hwbtable" id="theTable[RandomNumber]" border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td width="6%" align="right"><input name="child" type="checkbox" value=43></td>
</tr>
<tr>
<td width="6%" align="right"><input name="child" type="checkbox" value=44></td>
</tr>
<tr>
<td width="6%" align="right"><input name="child" type="checkbox" value=45></td>
</tr>
<tr>
<td width="6%" align="right"><input name="child" type="checkbox" value=46></td>
</tr>
</table>
</td>
</tr>
<!-- Record 2 -->
<tr class="d1">
<td width="9%" align="left"><input type="checkbox" name="master" value=353></td>
</tr>
<tr>
<td colspan="8">
<table class="hwbtable" id="theTable[RandomNumber]" border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td width="6%" align="right"><input name="child" type="checkbox" value=53></td>
</tr>
<tr>
<td width="6%" align="right"><input name="child" type="checkbox" value=54></td>
</tr>
</table>
</td>
</tr>
Next to each record (master or child), there is a checkbox. When the master record's checkbox is checked, all related child records for that specific group of child records are also checked. This is done using old school javascript by just going through all elements and looking at the values and checking them if they are related to the master record.
There is an onClick event on each master record checkbox. When clicked (i.e. when the master record is checked) i pass the child records to the javascript function. This is passed using Document.theForm.child. This passes all the child records as an array. I also pass the number of records associated with the master record clicked. And i also pass the value of the first child record.
Inside the javascript function i just go through the array of child records until i get to the one which matches the value i passed into the function which matches the first child record. I then use the number of child records to set the next n records to checked.
I know need to now modify this so that if all child records (related to a specific master record) are unchecked, the master record should also be unchecked. I want to modify the whole thing to use Jquery but without modifying the names and values of the checkboxes. I am not very familiar with Jquery so any guidance will be appreciated.
Thanks
Edit
What i want to do is to change it so that i can do to things.
When the checkbox for the master row is selected all children are selected
When the checkbox for teh master row is unselected all childrean are unselected
When any checkbox is unselected, a check is carried out to check that there is at least one child row selected otherwise the master row is unselected.
To do this, i will add a class element to each child row. The value of the class will be the value of the master row checkbox. I can then add an onClick event on the master checkbox passing the value. I would use that value to check/uncheck any checkbox with that value.
Each group of checkboxes will have a different class value depending on the master row. I have seen a couple of Jquery examples but i cant find examples of how to check/uncheck checkboxes based on values/id passed to a function. Here is an example i am working on now
<HTML>
<HEAD>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<SCRIPT language="javascript">
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
</SCRIPT>
<TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
</HEAD>
<BODY>
<H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
<th><input type="checkbox" id="selectall"/></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
<td>BlackBerry Bold 9650</td>
<td>2/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
<td>Samsung Galaxy</td>
<td>3.5/5</td>
</tr>
<tr>
<th><input type="checkbox" id="selectall2"/></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="selectall2" name="case" value="1"/></td>
<td>BlackBerry Bold 9650</td>
<td>2/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="selectall2" name="case" value="2"/></td>
<td>Samsung Galaxy</td>
<td>3.5/5</td>
</tr>
<tr>
<th><input type="checkbox" id="selectall3"/></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="selectall3" name="case" value="1"/></td>
<td>BlackBerry Bold 9650</td>
<td>2/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="selectall3" name="case" value="2"/></td>
<td>Samsung Galaxy</td>
<td>3.5/5</td>
</tr>
<tr>
<th><input type="checkbox" id="selectall4"/></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="selectall4" name="case" value="1"/></td>
<td>BlackBerry Bold 9650</td>
<td>2/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="selectall4" name="case" value="2"/></td>
<td>Samsung Galaxy</td>
<td>3.5/5</td>
</tr>
</table>
</BODY>
</HTML>
The example has 4 groups of records. Each master checkbox has an id which is the value used for each child as the 'class' value. How can i change each of the master checkboxes to include an onClick event which passes the id of the checkbox that was clicked. This Id is then used on the Jquery function to check any checkbox with a class value that matches the passed id. (similar for unchecking as well).
Thanks
EDIT:
New Requirements: http://jsfiddle.net/mdJQc/2/
$('input[type=checkbox]').click(function() {
var table = $(this).closest('tr td table'),
master = table.closest('tr').prev('tr').find('input'),
isEmpty = !! table.find('input:checked').length,
isMaster = !master.length;
if (!isEmpty) master.attr('checked', false);
if (isMaster) {
$(this).closest('tr').next('tr').find('input').attr('checked', $(this).is(':checked'))
}
})
You said you already have the check all code, so I just implemented the empty check:
$('input[type=checkbox]').click(function() {
var table = $(this).closest('tr td table'),
master = table.closest('tr').prev('tr').find('input'),
isEmpty = ! table.find('input:checked').length;
if (isEmpty) master.attr('checked', false);
})
Example
Related
In a table there are multiple rows, what I want is if I click on a particular name of user like "Sam" and "Adem" I want to get the value of checkbox which only relates to that row.
<thead>
<tr>
<td>Select</td>
<td>Name</td>
<td>Username</td>
<td>Rank</td>
<td>Address</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="" id="" value="1"></td>
<td>Sam</td>
<td>Sam001</td>
<td>Admin</td>
<td>XYZ</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="2"></td>
<td>Adem</td>
<td>Adem002</td>
<td>Manager</td>
<td>ZYZ</td>
</tr>
<tr></tr>
<tr></tr>
Attach click event on TD elements. In the handler find the checkbox using .parent() and .find() methods. When you have found the checkbox, get its value using .val() method.
I have a table whose rows are dynamically generated. The general structure is as follows:
<table id="table1">
<thead></thead>
<tbody>
<tr>
<td>Cell value 1</td>
<td>Cell value 2</td>
<td>Cell value 3</td>
<td>
<input type="checkbox" id="checkbox1" value="value1>
<input type="checkbox" id="checkbox2" value="value2>
</td>
</tr>
<tr>
<td>Cell value 4</td>
<td>Cell value 5</td>
<td>Cell value 6</td>
<td>
<input type="checkbox" id="checkbox1" value="value1>
<input type="checkbox" id="checkbox2" value="value2>
</td>
</tr>
</tbody>
</table>
Based on the value(s) in one of the (the third one to be precise), I am trying to check/uncheck the checkboxes. My script for the same is:
$('#table1 tbody tr').each(function(){
var cellValue = $(this).find("td").text();
if (cellValue=='someValue'){
$('#checkbox1).prop('checked',true);
}
});
The issue i'm facing is that, since the rows are dynamically generated so during that iteration, I can't get that specific set of checkboxes. Like the example above, during first iteration i'm setting checkbox1 and that's working but during second iteration, i'm trying to set checkbox2 in the second row but the checkbox2 in the first row is getting set. Any help/pointers will be highly appreciated. Thanks.
You get the third td by using .eq(2) and then to target the correct checkbox you can use:
$('.checkbox1', this)... //OR
$(this).find('.checkbox1')....
Depending on what your conditional statements are they may be combined into one by using the array .includes() method as in the demo below:
$('#table1 tbody tr').each(function() {
var cellValue = $(this).find("td").eq(2).text();
console.log(cellValue);
if ( ['Cell value 3','Cell value 6'].includes(cellValue) ){
$('.checkbox1', this).prop('checked',true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1">
<thead></thead>
<tbody>
<tr>
<td>Cell value 1</td>
<td>Cell value 2</td>
<td>Cell value 3</td>
<td>
<input type="checkbox" class="checkbox1" value="value1">
<input type="checkbox" class="checkbox2" value="value2">
</td>
</tr>
<tr>
<td>Cell value 4</td>
<td>Cell value 5</td>
<td>Cell value 6</td>
<td>
<input type="checkbox" class="checkbox1" value="value1">
<input type="checkbox" class="checkbox2" value="value2">
</td>
</tr>
</tbody>
</table>
You can't generate element with the same id. It will select the first element with that id when the function first executed. Use class="" instead.
also if you wanna store each checked value, check: HTML Element Array, name="something[]" or name="something"?
I have a code which gets one of input's to show/hide some information when it's chosen.
$("input[name$='payment']").click(function() {
Everything works as it should, however, my website let's user to click whole table element to tick the input.
How can I tell jQuery to choose whole element, not only the small input ticker if my code looks like this:
<table cellspacing="0">
<tbody><tr class="moduleRowSelected" onmouseover="rowOverEffect(this)"">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="importantpaymentwithexternalinformation" type="radio"> </td>
You can target the tables containing those elements using .closest("table"):
$("input[name$='payment']").closest("table").click(function() {
// ------------------------^^^^^^^^^^^^^^^^^
Within the click handler, this will refer to the table. Since a user clicking the table may not click the radio button, you'll want to include code to do that for them:
$(this).find("input[name$='payment']").prop("checked", true);
Example:
$("input[name$='payment']").closest("table").click(function() {
$(this).find("input[name$='payment']").prop("checked", true);
});
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type1" type="radio"> Type 1</td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type2" type="radio"> Type 2</td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type3" type="radio"> Type 3</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I want to Check or Uncheck an Checkbox which is part of an tr.
From this tr I already have the Name as Information.
I need something like "Uncheck checkbox on tr where tr.name = $name"
<tr>
<td id="klauselname">
002
</td>
<td>
50591
</td>
<td>
Text
</td>
<td id="td-center">
<input class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
<tr>
<td id="klauselname">
003
</td>
<td>
50601
</td>
<td>
Text
</td>
<td id="td-center">
<input class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
Do u have any idea? o.o
First of all , as others pointed out , IDs in your DOM should always be unique. You can use classes or other attributes for mass manipulation , but not IDs.
So lets clear the duplicate ids like this and at the same time add some IDs on your Checkboxes.
<tr>
<td id="myUniqueID_1">002</td>
<td>50591</td>
<td>Text</td>
<td class="td-center" id="myUniqueID_3">
<input id='myCheckBox_1' class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
<tr>
<td id="myUniqueID_2">003</td>
<td>50601</td>
<td>Text</td>
<td class="td-center" id="myUniqueID_4">
<input id='myCheckBox_2' class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
now we can add a function that will take care the Checkbox changes. We will use the checked property and will change it to false or true depending on our needs.
<script>
function changeState(elID){
var myCheckBoxStatus = document.getElementById(elID).checked;
if(myCheckBoxStatus)
document.getElementById(elID).checked = false;
else
document.getElementById(elID).checked = true;
}
</script>
and lets also place a button to test it out
<button onclick='changeState("myCheckBox_2");'>Toggle</button>
Can anyone help me out please.
I am having an image holding a check box. Like this I am having 4images with with 4 check boxes. If am selecting all the check boxes only I want to navigate to a new page directly.
if user clicked a single checkbox then the page should not redirect to the new page
if user clicked "select all" or if user selects all the check boxes one by one also the page should redirect to the new page.
Can any one please help me out and do the needful.
HTML
<table border="1">
<tr>
<th><input type="checkbox" id="selectall"/></th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
<td align="center"><img src="images/1.jpg" /></td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
<td align="center"><img src="images/2.jpg" /></td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
<td align="center"><img src="images/3.jpg" /></td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
<td align="center"><img src="images/4.jpg" /></td>
</tr>
</table>
JS
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
try to add window.location.href = newURL; after you check if all the checkboxes are selected:
if($(".case").length == $(".case:checked").length) {
window.location.href = "www.stackoverflow.com";
}
make sure you test this condition on both occasions:
if user clicked a single checkbox
if user clicked "select all"