We Keep Coding

Selecting specific value in row of the selected checkbox and checking for duplicates

I came across a problem whose solution has led me to post it here so others may make use of it or improvise better than me.
My Problem: I have a table of results with check boxes to select rows. The requirement was to know if I was selecting(using the checkboxes) the same set of one particular column value, if so I had to do something.

HTML code
Considering the below being my html code for the dynamic table(CFML). The tag has to be inside a loop to dynamically create the table content.
<table class="fixedTable">
<thead class="containerbg">
<tr class="listingheader">
<td>StagingID</td>
<td>BatchID</td>
<td>AuditID</td>
<td>Action</td>
<td>File Name</td>
<td>Card No</td>
<td>Card No</td>
</tr>
</thead>
<tbody>
<tr class="cur_row" >
<td>#staging_id#</td>
<td>#batch_import_job_id#</td>
<td>#audit_Id#</td>
<td>#code#</td>
<td class="file_name">#source_filename#</td>
<td>#card_number#</td>
<td class="tblResolve">
<input type="checkbox" class="checkBoxClass cb" name="resolveErrorsCheck" value="#row_no#">
</td>
</tr>
JS Code
//register the click event
$(document).ready(function() {
$(document).on('click', '.cb',enableDisableActions);
});
function enableDisableActions() {
var values = new Array();
$.each($("input[name='resolveErrorsCheck']:checked").closest('td').siblings('.file_name'),
function (){
values.push($(this).text());
});
const initial = values[0];
const result = values.filter(src => src != initial);
if(result.length){
//no duplicate file_name selected
//do something
}else{
//duplicate file_name selected
//do something
}
}

loop using JavaScript based in html id

if i have a table with an infinite which has an input type checkbox. Each check box is marked with an id eg. #det1, #det2 , #det3 how would i write my JS loop to check if that certain checkbox is checked to perform the function on it, without writing out each id ,because this id is also incremented based on the product uploader so for each product uploaded it will just add 1 to the id,at the end i could sit with allot of id's.
javascript that works adding the id manually:
$('#details1, #details2').on('change', function(){
var row = $(this).closest('tr').next('tr');
if ($(this).prop('checked')) {
$(row).show();
}
else {
$(row).hide();
}
});
So that works but because have so many id's based on my tr's i would just like to do a loop and check if that id exist (it could be id = #details999) and if it does do function on.change.
(for each product ill upload the id adds 1 to it eg. product1 = #details1 , product2 = #details2, etc...)
There might be a better way of implementing the idea but as im newbie i am open to any suggestions.
What i tried:
for (var i = 0; i < ?; i++) {
$('#details'+ i).on('change', function(){
var row = $(this).closest('tr').next('tr');
if ($(this).prop('checked')) {
$(row).show();
}
else {
$(row).hide();
}
})
}
i know ? means nothing but i realized i cant set a limit to that also don't want a infinite loop so i'm kind of stuck.

Add a common class to the select elements and use that to target them
<input type="checkbox" id="details1" class="details-checkbox">
<input type="checkbox" id="details2" class="details-checkbox">
<input type="checkbox" id="details3" class="details-checkbox">
and then use
$('.details-checkbox').on('change', function(){
var row = $(this).closest('tr').next('tr');
if ($(this).prop('checked')) {
$(row).show();
}
else {
$(row).hide();
}
});

I would use event delegation:
Event delegation allows us to attach a single event listener, to a
parent element, that will fire for all descendants matching a
selector, whether those descendants exist now or are added in the
future.
$('table').on('change', 'input[type="checkbox"]', function(e) {
var row = $(this).closest('tr').next('tr');
$(row).toggle($(this).prop('checked'));
})
tr.hidden { display: none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr><td>1</td><td><input type="checkbox" /></td></tr>
<tr class="hidden"><td colspan="2">Details 1</td></tr>
<tr><td>2</td><td><input type="checkbox" /></td></tr>
<tr class="hidden"><td colspan="2">Details 2</td></tr>
<tr><td>3</td><td><input type="checkbox" /></td></tr>
<tr class="hidden"><td colspan="2">Details 3</td></tr>
<tr><td>4</td><td><input type="checkbox" /></td></tr>
<tr class="hidden"><td colspan="2">Details 4</td></tr>
</tbody>
</table>

$('input:checkbox[id*=details ]').on('change',function(){
var row = $(this).closest('tr').next('tr');
if ($(this).prop('checked')) {
$(row).show();
}
else {
$(row).hide();
}
});

jQuery checkbox always false

First off I'd like to say that I know that this question was already asked a lot of times but I can assure you that I tried using all the answers I could find but all failed.
So first off I have a jQuery Datatable looking like this (I'm using laravel so that's why there's this foreach) :
<table>
<thead>
<tr>
<th id="head-cbx"><input type="checkbox" name="example"></th>
<th id="head-xcode">XCODE</th>
<tr>
</thead>
<tbody>
#foreach($xcodes as $xcode)
<tr>
<td id="head-cbx"><input type="checkbox" class="xcode-cbx" name="xcodes[]"></td>
<td>{{ $xcode }}</td>
<tr>
#endforeach
</tbody>
</table>
The obvious objective is to have a checkbox that allows me to check / uncheck all the others.
For the jQuery part I tried the following solutions :
$(document).ready(function(){
var headcbx = $('#head-cbx');
headcbx.change(function(){
if (headcbx.is(':checked')) {
//uncheck all
} else {
//check all
}
});
}
then
$(document).ready(function(){
var headcbx = $('#head-cbx');
headcbx.change(function(){
if ($(this).is(':checked')) {
//uncheck all
} else {
//check all
}
});
}
then
$(document).ready(function(){
var headcbx = $('#head-cbx');
headcbx.change(function(){
if (this.is(':checked')) {
//uncheck all
} else {
//check all
}
});
}
then I changed my test from
if (this.is(':checked'))...
to
if(this.checked)
and then to
if(this.prop('checked)
of course, each time I tried the variants
this
headcbx
$(this)
$('#head-cbx')
After that I tried using
$(document).on('change', '#head-cbx', function(){...})
with all the same variants that I listed above.
Anyway, I always have the same result : false.
So I'm beginning to get frustrated and I could use the help because I think I'm missing something obvious somewhere but I can't seem to find it...
Thanks :)

Your selector is wrong, as head-cbx refers to <TD> element not checkbox So either change selector
var headcbx = $('#head-cbx :checkbox');
Note: this.checked/$(this).is(':checked')/$(this).prop('checked) would work
OR, Fix HTML
<th><input id="head-cbx" type="checkbox" name="example"></th>

The issue is here:
var headcbx = $('#head-cbx');
&
<td id="head-cbx">
the id you are ussing in event listener is of td, not of checkbox. So change it to something like:
var headcbx = $('#head-cbx :checkbox');

How to loop through group of check boxes that have same class name?

I have dynamic table that has table cell with checkbox field. This fields are populated from DB so my table is dynamic. I would like to loop through checkboxes based on their class name. In that loop I want to check value for each check box. For example if value is equal 1 I want checkbox to be checked, if not unchecked. Alo I'm not sure if possible but I would like to set unique ID for each of these check boxes. Since my table is dynamic my fields need to have unique ID's. Here is example of my code:
<table>
<thead>
<tr>
<th>#</th>
<th>Time Slots</th>
<th>Block</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>~(SLOT_LABEL)</td>
<td>
<span>
<input type="checkbox" name="CF-[Events]" class="block" id="block_"+Value that will make this ID unique. value="~(SLOT_ID)"/>
</span>
</td>
</tr>
</tbody>
</table>
Also in current language that I work with to read values from DB I have to use NAME tag. If anyone can help please let me know. Thank you.

You can use the attribute selector to retrieve elements by both their name and value. Try this:
$('input[name="CF-[Events]"][value="1"]').prop("checked", true);
Working example

If you don't want a jQuery solution, it is also possible to fetch these elements with the querySelector:
var inputs = document.querySelectorAll("input.block");
for(var i = 0; i < inputs.length; i++) {
inputs[i].checked = true;
}

you can do it in jquery by each loop
$('.ClassName').each(function(i, o) {
// o is object in your case checkbox
// i is index
// your code
});

$("input[name='CF-[Events]']").each(function() {
if($(this).val() === "1")
{
$(this).prop("checked", true);
}
});

How to get value of table cell with jquery from checkbox using absolute row number

I have a table 'mytable' that looks like:
<tr>
<td><input type="checkbox" name="check[]" value="11"></td>
<td>11</td>
<td>2014-11-06 18:49:26</td>
<td>MESSAGE</td>
<td></td>
<td>MATCH5</td>
<td>NO MATCH</td>
<td>NO MATCH</td>
</tr>
I want to get the value of column 4 "MESSAGE" from a row if its checked
as you can see each row begins with a checkbox which have a value. however the value is non-sequential so I can't just go with the checkbox value (which I have been getting with
var IDs = $('input:checked').map(function(){
return $(this).val();
}).get();)
I need some way of counting table rows then I can use something like:
var id= $("#myTable tr").eq(ID).find('td').eq(4).val()
How to do this?

You were pretty close but consider what this is in the context of map().
this is the checkbox that is checked. From there you can find the closest tr and then the td with the 3rd 0-based index, and then get the text() of that td. td doesn't have a value so use text instead.
var ids = $('table input:checked').map(function(){
return $(this).closest('tr').find('td:eq(3)').text();
});