We Keep Coding

Jquery checkbox affect one item not all items

I was wondering if someone can help me please, I have a series of checkboxes that when clicked change the div background, activate 2 inputs and add a tick icon. My issue is that when one check box is checked the class .TickIco shows for all and so does the .disableToggle
How can i get it so that this only affects one .checkBG at a time and not all of them?
Hopefully this JSFiddle will help explain what I mean.
https://jsfiddle.net/jayjay89/xfg96we5/
thanks
$(".checkBG").click(function () {
var checked = $(this).is(':checked');
var location = $(this).parent().parent().parent();
if (checked) {
$(this).parent().parent().parent().addClass("activeformBlock");
$(".tickIco").show();
$(".disabletoggle").removeAttr("disabled");
} else {
$(this).parent().parent().parent().removeClass("activeformBlock");
$(".tickIco").hide();
$(".disabletoggle").attr('disabled', 'disabled');
}
});
thanks

you can use the context in which the selector will be looked.
You already have the location variable which is the parent context for one of your row
$(".checkBG").click(function () {
var checked = $(this).is(':checked');
var location = $(this).parent().parent().parent();
if (checked) {
$(this,location).parent().parent().parent().addClass("activeformBlock");
$(".tickIco",location).show();
$(".disabletoggle",location).removeAttr("disabled");
} else {
$(this,location).parent().parent().parent().removeClass("activeformBlock");
$(".tickIco",location).hide();
$(".disabletoggle",location).attr('disabled', 'disabled');
}
});

Your issue lies in the way you are selecting the .tickIco and .disabletoggle elements:
$(".tickIco").show();
$(".disabletoggle").removeAttr("disabled");
These jquery calls use selectors that match all classes of .tickIco and .disabletoggle.
Dirty solution (finds elements of the parent with matching classes using .find()):
$(this).parent().parent().parent().find(".tickIco").show();
$(this).parent().parent().parent().find('.disabletoggle').removeAttr("disabled")
Better solution:
jQuery selecter takes the context of your selection as a second argument so you can:
var context = $(this).parent().parent().parent();
$(".tickIco", context).show();
$('.disabletoggle', context).removeAttr("disabled")

While loop and toggling table header

I have a table with <theader>. Underneath each header, my PHP generates a <tbody> My goal is to toggle the <tbody> underneath each of these headers once the user clicks on the Table Header. Each <theader> has a unique id and so does the <tbody> that corresponds to it. So for example the header is #GenEdCategory1 and clicking on it will toggle #GenEdCourses1. and so on for #GenEdCategory2 and #GenEdCourses2 ...
I used these selectors for jQuery to do the toggling.
When I hardcode it, it works fine! Clicking on #GenEdCategory1 will toggle the #GenEdCourses1. But I want to make it dynamic based on the number of headers that have been fetched, I can't toggly anything!
I do this using a while loop but when I code it, it stops working. Any insight would be greatly appreciated! Cheers :)
var numberCategory = $('[id^=GenEdCategory]').length; //calculates number of GenEdCategories
var idCntr = 1; //GenEdCategory ctr
var cool = "#GenEdCategory" + idCntr; //click on this to toggle
var cool2 = "#GenEdCourses" + idCntr; //I want to toggle this
while (idCntr < numberCategory) {
$(document).on("click", cool, function(){
$(cool2).toggle();
});
idCntr = idCntr + 1;
cool = "#GenEdCategory" + idCntr;
cool2 = "#GenEdCourses" + idCntr;
};
};
};
Here's the HTML Snippet of the table I'm working with:

You can use jQuery's DOM traversal function to do it in a single function, not a loop, and there's no need to give them IDs.
$("thead").click(function() {
$(this).next("tbody").toggle();
});
BTW, <theader> should be <thead>.

delete rows between tables with identical tr id

I have two tables and with same tr ids and content (for some reason)!
When I click a check a box in table1 I should be able to delete that row in both table1 and table2 etc. How can I achieve this?
I can delete from table1 using
table1.on('click','tr .lowBox:checked',function(){
$(this).closest('tr').remove();
}
How do I delete row from table2.
thanks!

table1.on('click','tr .lowBox:checked',function(){
$(this).closest('tr').remove(); //send to var to perform as below
$("table2").closest('tr').remove(); //If you're traversing UP
$("table2").find('tr').remove(); //If you're traversing DOWN
//Inside your "click" event, you can traverse any part of the DOM
//regardless of where you entered the document with your click event
//slightly more robust, you could do this..
/*or as fed variables...e
var $item1 = $(this).closest('tr');
var $item2 = $("table2").closest('tr');
var $rmTwo = function(item1,item2){
$(item1).remove();
$(item2).remove();
}
//Then execute your repeatable function, using the two tr's
$rmTwo($item1,$item2);
// should remove both, and you can play
//with your jQuery to get the correct elements
//or alter them if you change your code structure.
}
This would be the closest I can get you without seeing any of your HTML, and under the assumption that you're using jQuery on your page.

As others have commented, you shouldn't have duplicate IDs. Instead you could use classes, or generate IDs that are unique (for example, by prefixing with the table id). However, if you must do it this way, here's what you could do:
table1.on('click','tr .lowBox:checked',function(){
var row = $(this).closest('tr');
table2.children("#" + row[0].id).remove();
row.remove();
}
If you switch to table-unique classes for each row:
table1.on('click','tr .lowBox:checked',function(){
var row = $(this).closest('tr');
table2.children("." + row[0].className).remove();
row.remove();
}
This solution makes a few assumptions about the structure of your HTML. I can update it if you post a more detailed sample of your HTML.

I solved this with:
table1DT=var $('#table1').dataTable({});
table2DT=var $('#table2').dataTable({});
table1DT.on('click','tr .lowBox:checked',function(){
var row= $(this).closest('tr');
//do some thing with row variable
var d=row.attr('id');
var nRow = $('#table2 tbody tr[id='+d+']')[0];
table2DT.fnDeleteRow(nRow);
table1DT.fnDeleteRow(row);
}
so checking the table1 check box would delete that particular row in table1 and table2 etc.

Datatable move rows button

I have a two datatables and have this function to move rows from one to the other, it works perfectly as is, but I want to trigger the action not by clicking the row but by clicking a button, tried changing it but won't work.
...
stockTable.on('click', 'tr' ,function() { //'#toggle' selector instead 'tr'
var $row = $(this); // $(this).closest('tr'); instead $(this);
var addRow = stockTable.fnGetData(this); //$(this).closest('tr'); instead
catalogTable.fnAddData(addRow);
stockTable.fnDeleteRow($row.index());
});
...
<td><button class="toggle">C</button></td>
....
Sorry if the question may seem dumb but I'm ne to javascript.
Thanks in advance.

Replace tr with .toggle and it should work. You were trying with the ID # selector, you need a class . selector.
stockTable.on('click', '.toggle' ,function() {
You then have to re-assign this to the closest tr:
var $row = $(this).closest("tr");

How to iterate through an HTML table column and input the values into a Javascript array using JQuery

Let's say I have a table column with 10 rows, each with <td id="num"> and a text value.
How can I use JQuery to loop through each row in the column and input the spins into a Javascript array?
I thought the following code would do it, but it is only getting the first element:
var numArray = [];
$("#num").each(function(n){
numArray[n] = $(this).text();
});
Any ideas?
Thanks!

You can't have multiple elements with the same id. This isn't allowed because the id is used to identify individual elements in the DOM. I'd suggest giving them all the same class, which is allowed.
<td class="num">
Then this should work:
var numArray = [];
$(".num").each(function(n){
numArray[n] = $(this).text();
});

Like mcos said, selecting by id for all the tables doesn't work. There can only be one item on a page with a given id.
You can either give your table an id and do the following:
var numArray = [];
// Assuming #my-table-id is your table and you want all the tds
$("#my-table-id td").each(function(n){
numArray[n] = $(this).text();
});
Or if you don't want all the tds, use a class to identify the ones you want
var numArray = [];
// Assuming #my-table-id is your table and you added class="collect"
// to the tds you want to collect
$("#my-table-id td.collect").each(function(n){
numArray[n] = $(this).text();
});
Also stealing from others answers, the map function can also help you make your code even smaller
var numArray = $.map( $("#my-table-id td.collect"), function (td){
return $(td).text();
})

You can achieve the this with using .text(function(i, text){})
var allText = [];
$("table td").text(function(i, t){
allText.push(t);
});
Code example on jsfiddle
If you need to target a particular cell(s) you can just modify the selector.
$("table td#num").text(function(i, text){
allText.push(text);
});
With that being said, an id should be unique per dom and if you can adjust the html using a class would be the right way.
<td class="num">
some text 1
</td>
$("table td.num").text(function(i, text){
allText.push(text);
});
Example

it's advised that use don't reuse the ID but since it'll html.. it'll still work..
the jQuery ID(#) selector will only select the first match...
you can use the td[id^='num'] or td[id*='num'] or td[id$='num'] instead
use the map ..
var numArray = $("td[id^='num']").map(function(){
return $(this).text();
}).get();
This will select all the td's with ID's starting as num
See it here