We Keep Coding

Issue regarding to set a checkbox with a particular value among all checkboxes with same id and class using javascript

I have an existing web application. Now I am facing a particular problem regarding some javascript. I have a list of checkbox with same classname, id and name. That means all checkbox will have the same class,name and id. Only the value will be different for each checkbox.
The code is as follows:
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="Austin Engineering" /></td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="FAG" /></td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="Jeekay" /></td>
</tr>
Now the problem is that through javascript after checking some condition I have to set the checkbox with a specific value.
I have tried the following line of code,but it is not working.
$("#brand_id_").attr("value",'FAG').attr("checked", true);
It was setting the first checkbox. And that checkbox has a different value.
Please help me to find out a solution for this.
Thanks in advance!!

Use class selector, and check for value attribute.
$(".brand_tag[value='FAG']").attr("checked", true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="Austin Engineering" /></td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="FAG" /></td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="Jeekay" /></td>
</tr>
Although this will work but please note that element with duplicate Ids means your HTML is invalid. Try to avoid this.

You can try this
$(".brand_tag[value=FAG]").attr("checked","checked");

First of all you need to set your check boxes with different ID's, and then you can use either class selector or ID selector or tag selector.
If you want to set the value and the checked property of all the checkboxes to 'FAG' and true respectively, use the following:
$(".brand_tag").attr("value",'FAG').attr("checked", true);
If you want to set the properties for a specific checkbox, use the ID selector after you change the ID's of your checkboxes as follows:
$("#NewID1").attr("value",'FAG').attr("checked", true);
where NewID1 is the ID of that specific checkbox that you want to modify its properties.

You can use
$("input[type=checkbox][value='FAG']").prop("checked", true);
As your code attr("value",'FAG') will change the value of checkbox

Check my examples :-)
https://jsfiddle.net/6cz22b18/4/
<table id="brand_id_table">
<tr>
<td><input type="text" id="txtInput" value="FAG"></td>
<td><button onclick="$.setCheckbox()">Check</button></td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="Austin Engineering" />Austin Engineering</td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="FAG" />FAG</td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="Jeekay" />Jeekay</td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="FAG" />FAG</td>
</tr>
</table>
$.setCheckbox = function() {
// reset
$("#brand_id_table").find("input:checkbox").attr('checked', false);
// set checkbox
$("#brand_id_table").find("input:checkbox").each(function() {
if($(this).val() == $("#txtInput").val()) {
$(this).attr('checked', true);
}
});
}
'$("#brand_id_table").find("input:checkbox")' is items
so, you have to use each() function that is like a 'for statement'.

Set focus to next input field in a table

I would like to focus the next input in a table field by pressing enter.
The table looks like this:
<table>
<tbody>
<tr>
<td>Title 1</td>
<td><input type="number"></td>
<td>Unit</td>
</tr>
<tr>
<td>Title 2</td>
<td><input type="number"></td>
<td>Unit</td>
</tr>
<tr class="group">
<td colspan="3"></td>
</tr>
<tr>
<td>Title 3</td>
<td><input type="number"></td>
<td>Unit</td>
</tr>
<tr class="group">
<td colspan="3"></td>
</tr>
<tr>
<td>Title 4</td>
<td><input type="number"></td>
<td>Unit</td>
</tr>
</tbody>
</table>
And this is my JS to focus the next input field.
'change input[type="number"]': (event) => {
$(event.target).closest('tr').next(':not(.group)').find('input').focus();
}
This is working for the first field. The next input field gets focused. But I can't focus the third input field.
I also tried
'change input[type="number"]': (event) => {
$(event.target).closest('tr').siblings(':not(.group)').find('input').focus();
}
But then the focus is set to the last input field and I don't understand why.

The problem is that jQuery's next() only looks at the next sibling, not all following siblings. What you want is nextAll():
$(event.target)
.closest('tr')
.nextAll('tr:not(.group)')
.first()
.find('input')
.focus();

Get nested table id by searching td text

HI i want to get nested table id based on text search.Please help me on this.
i want to get id="nested1" by searching text "PCI Date".
<table>
<tbody>
<tr>
<td>
<table id="nested1">
<tbody>
<tr>
<td><span>PCI Date</span></td>
<td><input type="text" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table id="nested2">
<tr>
<td><span>New text</span></td>
<td><input type="text" /></td>
</tr>
</table>
</td>
</tr>
</table>

Try using contains() & parents()
var id = $('span:contains("PCI Date")').parents('table').attr('id');
alert(id);
Reference:
contains()
parents()

jQuery/Javascript: Check all checkboxes on the following table

My original javascript was:
$(document).ready(function(){
$("th :checkbox").change(function() {
$(this).closest("table").find(":checkbox").prop("checked", $(this).is(":checked"));
});
});
which was used on a setting like this:
<div>
<table id="table" width="100%">
<tr>
<th><input type="checkbox" />Select All</th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
</table>
</div>
I slightly changed how my tables were and it now goes something like:
<table>
<tr>
<th><input type="checkbox" />select all</th>
</tr>
</table>
<table>
<tr>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
</tr>
</table>
What do I need to change in my javascript so that when the checkbox in <th> is checked, all the checkboxes inside the <td>'s in the next table are checked?
Thanks.
Related to this post.

Add .next() to .closest("table"):
$(document).ready(function(){
$("th :checkbox").change(function() {
$(this).closest("table").next().find(":checkbox").prop("checked", $(this).is(":checked"));
});
});
$(this).closest("table") selects the table of the element matching th :checkbox. next() selects the next element, which is another table, in this case.
This code can break easily. I suggest to set an ID to the other table, and use the following code:
$(document).ready(function(){
$("th :checkbox").change(function() {
$("#id-of-table :checkbox").prop("checked", $(this).is(":checked"));
});
});

Handling checkboxes in groups using Jquery or Javascript

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