I have a table with bunch of checkboxes in each row. How can I find position of the checked box e.g. 1A or 1B when both or one of the checkboxes is checked in first row. The page I am trying to modify, dynamically makes the table based on two factors for the rows and columns. SO I just need to grab the rowname and colname in order to program further. e.g. 10(A) if the name of first row was '10'.
<table id="mytable">
<tr>
<td> </td>
<td align="center"> A </td>
<td align="center"> B </td>
</tr>
<tr>
<td> 1 </td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td> 2</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
</table>
<tr> <button id="save">Click</button> </tr>
This will get the column and row of a checked input, and it gets the column letter and row number through calls to document.querySelector, using CSS3 first-child and nth-child selectors based on the column and row:
document.getElementById('mytable').addEventListener('click', function(e) {
if(e.target.tagName === 'INPUT') {
var td= e.target.parentNode, //the input's td parent
tr= td.parentNode, //the td's tr parent
col= td.cellIndex, //the input's column
row= tr.rowIndex, //the input's row
header= document.querySelector('#mytable tr:first-child td:nth-child('+(col+1)+')').textContent,
number= document.querySelector('#mytable tr:nth-child('+(row+1)+') td:first-child').textContent;
document.getElementById('output').textContent= number+header;
}
});
<table id="mytable">
<tr>
<td></td>
<td align="center">A</td>
<td align="center">B</td>
</tr>
<tr>
<td>1</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>2</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
</table>
<div id="output"></div>
try this # plain javascript:
var checkboxes = [];
for(var i =0; i<document.getElementsByTagName("input").length;i++) {
if(document.getElementsByTagName("input")[i].checked) {checkboxes.push(i)}
}
checkboxes is an array of checked checkboxes - e.g. [0,2] if the first and the 3rd checkboxes are checked
or like this:
https://jsfiddle.net/zLy90w40/1/
function getCheckBox(){
var oneA = document.getElementById('1a');
var oneB = document.getElementById('1b');
var twoA = document.getElementById('2a');
var twoB = document.getElementById('2b');
if (oneA.checked){
alert("1 A was checked") ;
}
if(oneB.checked){
alert("1 B was checked") ;
}
if(twoA.checked){
alert("2 A was checked") ;
}
if(twoB.checked){
alert("2 B was checked") ;
}
}
Related
Trying to :
Verify if a checkbox got selected.
2.Retrieve the value.
Save a value in an array.
So my array would have the following values: [1,21,111]
What him I missing, any guidance would be appreciated.
After I've figured this out... will go and create another array to store the automationName.
var SelectedItems = [];
$('.btn1').on('click', function() {
SelectedItems.length = 0;
$('#flowtable tbody tr').each(function() {
// if ($(this).is(':checked')) {
// if ($('.scheduleMe').is(':checked')) {
if ($('td .scheduleMe').is(':checked')) {
SelectedItems.push($(this).attr("id"));
}
});
console.log('Checked #' + SelectedItems.length);
console.log("list 2= " + SelectedItems);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<h1>jQuery Crash Course</h1>
</header>
<div id="container">
<form id="form">
<table id="flowtable">
<tbody>
<tr class="selected">
<td id="1"></td>
<td class="automationName"> automation 1</td>
<td><input type="checkbox" class="scheduleMe" name="vehicle1"></td>
</tr>
<tr>
<td id="21"></td>
<td class="automationName">automation 21</td>
<td><input type="checkbox" class="scheduleMe" name="vehicle21"></td>
</tr>
<tr>
<td id="111"></td>
<td class="automationName">automation 111</td>
<td><input type="checkbox" class="scheduleMe" name="vehicle111"></td>
</tr>
</tbody>
</table>
<button type="button" class="btn1">check list box</button>
</form>
</div>
Firstly, give the checkboxes a value which is the id they relate to, not the the sibling/parent td.
From there you can simplify your logic by using map() to build an array of the selected values only once, when the button is clicked, not having to maintain additions/deletions from the higher scoped array when a change is made.
Below is a working example. Note the use of label elements to make the clickable area of the checkboxes bigger.
$('.btn1').on('click', function() {
let selectedItems = $('.scheduleMe:checked').map((i, el) => el.value).get();
console.log(selectedItems);
// work with the array as required here, eg. pass to a fnuction for processing...
});
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<header>
<h1>jQuery Crash Course</h1>
</header>
<div id="container">
<form id="form">
<table id="flowtable">
<tbody>
<tr class="selected">
<td id="1"></td>
<td class="automationName"><label for="vehicle1">automation 1</label></td>
<td><input type="checkbox" value="1" class="scheduleMe" name="vehicle1" id="vehicle1" /></td>
</tr>
<tr>
<td id="21"></td>
<td class="automationName"><label for="vehicle21">automation 21</label></td>
<td><input type="checkbox" value="21" class="scheduleMe" name="vehicle21" id="vehicle21" /></td>
</tr>
<tr>
<td id="111"></td>
<td class="automationName"><label for="vehicle111">automation 111</label></td>
<td><input type="checkbox" value="111" class="scheduleMe" name="vehicle111" id="vehicle111" /></td>
</tr>
</tbody>
</table>
<button type="button" class="btn1">check list box</button>
</form>
</div>
If, for whatever reason, you can't change the HTML, then you can read the value from the td in map() like this:
let selectedItems = $('.scheduleMe:checked').map((i, el) => $(el).closest('tr').find('td[id]').prop('id')).get();
callMe() is a function that is handling all logic.
I am just checking if the checkBox is checked or not by using default property of input type checkbox checked.
If it is checked then we are pushing it in array, just making sure the item is not already there by using includes(). method.
var SelectedItems = [];
const tableRows = document.querySelectorAll("#flowtable tr");
const checkBoxes = document.querySelectorAll("#flowtable tr td > input");
const btn = document.querySelectorAll("#btn1");
function callMe() {
checkBoxes.forEach(checkBox => {
if (checkBox.checked) {
const currentParent = checkBox.parentElement.parentElement;
const getId = currentParent.querySelectorAll("td[id]")[0];
const val = getId.id;
if (SelectedItems.includes(val)) return;
SelectedItems.push(val);
}
})
if (SelectedItems === undefined || SelectedItems.length == 0) {
// array does not exist or is empty
console.log("No checkbox is checked.");
} else {
console.log(SelectedItems);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<h1>jQuery Crash Course</h1>
</header>
<div id="container">
<form id="form">
<table id="flowtable">
<tbody>
<tr class="selected">
<td id="1"></td>
<td class="automationName"> automation 1</td>
<td><input type="checkbox" class="scheduleMe" name="vehicle1"></td>
</tr>
<tr>
<td id="21"></td>
<td class="automationName">automation 21</td>
<td><input type="checkbox" class="scheduleMe" name="vehicle21"></td>
</tr>
<tr>
<td id="111"></td>
<td class="automationName">automation 111</td>
<td><input type="checkbox" class="scheduleMe" name="vehicle111"></td>
</tr>
</tbody>
</table>
<button type="button" id="btn1" onclick="callMe();">check list box</button>
</form>
</div>
i have a html table which i has many checkboxes. when user click on header checkbox then all child checkbox will be checked and unchecked based on header checkbox checked state.
user can uncheck and check any child checkbox too. i want to store child checkbox value in hidden field separated by comma. when child checkbox is selected then checkbox value will be store in hiiden field but if that checkbox value is in hiiden field then will not be store in hidden field.
when user uncheck anyone then that checkbox value will be removed from hidden field.
I tried this way but not successful. so guide me how to achieve it. my code as follows
<table id="tbl" border="10">
<thead>
<tr>
<td><input type="checkbox" id = "chckHead" /></td>
<td>First Row</td>
<td>Second Row</td>
<td>Third Row</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class = "chcktbl" value="101"/>
</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>
<input type="checkbox" class = "chcktbl" value="102"/>
</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>
<input type="checkbox" class = "chcktbl" value="103"/>
</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
<input id="hidden" type="hidden" name="hidden">
$(document).ready(function(){
$('#chckHead').click(function () {
$(".chcktbl").prop('checked', $(this).prop("checked"));
});
$(".chcktbl").change(function() {
var values = [];
$('.chcktbl').each(function (index, obj) {
alert('pop');
if (this.checked === true) {
values.push($(this).val());
}
});
});
alert(values.toString());
});
You forget to assign the checkboxes values to the hidden input and also, you have to do so in the header checkbox event listener.
$(document).ready(function() {
var hidden = $('#hidden');
$('#chckHead').click(function() {
var state = $(this).prop('checked');
if(state === false) {
hidden.val('');
}
var vals = [];
$('.chcktbl').each(function() {
$(this).prop('checked', state);
if(this.checked === true) {
vals.push($(this).val());
}
});
hidden.val(vals.toString());
});
$(".chcktbl").change(function() {
var values = [];
$('.chcktbl').each(function(index, obj) {
if(this.checked === true) {
values.push($(this).val());
}
});
hidden.val(values.toString());
});
});
<table id="tbl" border="10">
<thead>
<tr>
<td><input type="checkbox" id="chckHead" /></td>
<td>First Row</td>
<td>Second Row</td>
<td>Third Row</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="chcktbl" value="101" />
</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>
<input type="checkbox" class="chcktbl" value="102" />
</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>
<input type="checkbox" class="chcktbl" value="103" />
</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
<!--for the demo purpose, I changed the type of the input to 'text' to see the result, don't forget to change to 'hidden' again.-->
<input id="hidden" type="text" name="hidden">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Hope I pushed you further.
You should be able to get all checked checkboxes with this selector:
$('input[type=checkbox]:checked')
Then you can call map to get all the ids and join them
string = $('input[type=checkbox]:checked').map(function(idx,element) {
return element.value;
}).join(',')
Then just listen the onChange event for all checkboxes and set the value for the hidden field.
I have a table and I want to sort the rows by the user,Each row contains one input, for enter a row number. Here rows are sorted by data-sort Attribute in tr and each input has a rownum attribute whose value is equal to the value of the tr data-sort attribute.There are 6 rows here. We want to take the input value of each row, and move that row there, and the values of the attributes are the same as the input.For example, if you enter 1 in the input of one of the rows, that row will be our first row.
The following code runs for the first time, but after moving one of the rows does not work anymore.When its value changes. where is my mistake?
jsfiddle
$('.m').on('change', function () {
var Des = parseInt($(this).val());
var RowNum = parseInt($(this).attr('rownum'));
$('tr[data-sort="' + RowNum + '"]').attr('data-sort', -100);
$('input[rownum="' + RowNum + '"]').attr('rownum', -100);
if (Des > RowNum) {
for (var i = RowNum + 1; i <= Des; i++) {
var newVal = i - 1;
$('tr[data-sort="' + i + '"]').attr('data-sort', newVal);
$('input[rownum="' + i + '"]').attr('rownum', newVal);
}
}
if (Des < RowNum) {
for (var i = Des + 1; i <= (RowNum - 1); i++) {
var newVal = i + 1;
$('tr[data-sort="' + i + '"]').attr('data-sort', newVal);
$('input[rownum="' + i + '"]').attr('rownum', newVal);
}
}
$('tr[data-sort="-100"]').attr('data-sort', Des);
$('input[rownum="-100"]').attr('rownum', Des);
var divList = $("tr");
divList.sort(function (a, b) {
return (parseInt($(a).data("sort")) - parseInt($(b).data("sort")))
});
$("tbody").html(divList);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h4>
inter value between 1-6
</h4>
<table class="table table-hover">
<tbody>
<tr id="1" data-sort="1">
<td>One</td>
<td>
<input rownum="1" class="m" />
</td>
</tr>
<tr id="2" data-sort="2">
<td>Two</td>
<td>
<input rownum="2" class="m" />
</td>
</tr>
<tr id="3" data-sort="3">
<td>Three</td>
<td>
<input rownum="3" class="m" />
</td>
</tr>
<tr id="4" data-sort="4">
<td>Four</td>
<td>
<input rownum="4" class="m" />
</td>
</tr>
<tr id="5" data-sort="5">
<td>Five</td>
<td>
<input rownum="5" class="m" />
</td>
</tr>
<tr id="6" data-sort="6">
<td>six</td>
<td>
<input rownum="6" class="m" />
</td>
</tr>
</tbody>
</table>
</div>
as you rebuild and replace html piece of code on which you have your listener, you have to rebind event listener to the new created elements with class "m". Something as below (not elegant,only here to show a working example - and you don't need all your test. You just need to assign input value to data-sort attribut and then reorder with sort function)
$('.m').on('change', function (evt) {
changeOrder(evt);
})
function changeOrder(evt){
$this=$(evt.currentTarget);
var Des = parseInt($this.val());
var RowNum = parseInt($this.attr('rownum'));
$this.parent().parent().data("sort",Des)
var divList = $("tbody").find("tr").sort(function (a, b) {
return (parseInt($(a).data("sort")) - parseInt($(b).data("sort")))
});
$("tbody").html(divList);
$('.m').on('change', function (evt) {
changeOrder(evt);
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<h4>
inter value between 1-6
</h4>
<table class="table table-hover">
<tbody>
<tr id="1" data-sort="1">
<td>One</td>
<td>
<input rownum="1" class="m" />
</td>
</tr>
<tr id="2" data-sort="2">
<td>Two</td>
<td>
<input rownum="2" class="m" />
</td>
</tr>
<tr id="3" data-sort="3">
<td>Three</td>
<td>
<input rownum="3" class="m" />
</td>
</tr>
<tr id="4" data-sort="4">
<td>Four</td>
<td>
<input rownum="4" class="m" />
</td>
</tr>
<tr id="5" data-sort="5">
<td>Five</td>
<td>
<input rownum="5" class="m" />
</td>
</tr>
<tr id="6" data-sort="6">
<td>six</td>
<td>
<input rownum="6" class="m" />
</td>
</tr>
</tbody>
</table>
</div>
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>
I have a table with five columns
column1 column2 column3 column4 column5
------- ------- ------- ------- -------
and I have some check boxes each one for one column when the first checkbox is checked
then I need to show the first column , if unchecked I need to hide first column. Like that
I need to do for all columns.
I found some answers but I did not find any solution .First time it is hiding then other
operations are not working on that.
$('#tableId td:nth-child(column number)').hide();
Please help me .Thanks in advance....
Here you go, full solution:
http://jsfiddle.net/vXBtP/
and updated here: http://jsfiddle.net/vXBtP/5/
<table>
<thead>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
</thead>
<tbody>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
<td>column 4</td>
<td>column 5</td>
</tr>
</tbody>
</table>
$(document).on('change', 'table thead input', function() {
var checked = $(this).is(":checked");
var index = $(this).parent().index();
if(checked) {
$('table tbody tr td').eq(index).show();
} else {
$('table tbody tr td').eq(index).hide();
}
});
Depending on the column # you wanna hide, use this stolen one liner:
$('td:nth-child(2)').hide();
if you use th
$('td:nth-child(2),th:nth-child(2)').hide();
If I got what you mean, you can make it real simple using tr th, tr td and nth-child selector. You can go based on index, but you'll need to add 1 as nth-child is not 0 indexed like elements in jQuery. And the JS doesn't really have to be drawn out. I should mention, placing tr before td:nth is very important in that you don't want "only the nth td". if that's the case, you won't hide every col on every row.
See WORKING jsFIDDLE of YOUR Example
FYI: If you want something "cleaner" looking, (like on the turbotax site) dont hide the td itself. Instead make it slightly wider than your largest piece of text, and place each piece of text inside p or div tags inside each cell. Then change you column selector to grab each cell's inner element and hide that instead.
See Example of this Alternate way here!
HTML
<table>
<thead>
<tr>
<th>
<input id="chk1" type="checkbox" />
</th>
<th>
<input id="chk1" type="checkbox" />
</th>
<th>
<input id="chk1" type="checkbox" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
</tbody>
</table>
<button>Reset</button>
JavaScript
$(function() {
// Selects your table by id, then the input checkboxes inside the table, you can
// alternate this call with classnames on your inputs if you're going to have
// more inputs than what's desired in call here.
// also note i'm using the "change" function and not "click", this simply
// provides easier control of what's going on with your inputs and makes
// later calls (like reset) a much easier call. Less thinking required
$("#tableId input[type=checkbox]").on("change", function(e) {
// First variable grabs the inputs PARENT index, this is the TH containing
// the input, thus the column you want hidden.
// The second is calling ALL TH's && TD's having that same index number
var id = $(this).parent().index()+1,
col = $("table tr th:nth-child("+id+"), table tr td:nth-child("+id+")");
// This simple inline "if" statement checks if the input is checked or now
// and shows the columns based on if it IS checked
$(this).is(":checked") ? col.show() : col.hide();
}).prop("checked", true).change(); // here i set all inputs to checked without having to write it in the above HTML
$("button").on("click", function(e) {
$("input[type=checkbox]").prop("checked", true).change();
});
})
You can get the header index of table and make the table header and td elements hidden. Something like this Suppose the index of table header is index = 2;
var index= tableHeaderIndex; // 2 here
$('th:nth-child('+index+')').hide();
$('td:nth-child('+index+')').hide();
Like this?
Lashed together quickly but should work.
<table id="TabToHide">
<tr>
<td class="Col1">Col 1</td>
<td class="Col2">Col 2</td>
<td class="Col3">Col 3</td>
<td class="Col4">Col 4</td>
<td class="Col5">Col 5</td>
</tr>
<tr>
<td class="Col1">Stuff 1</td>
<td class="Col2">Stuff 2</td>
<td class="Col3">Stuff 3</td>
<td class="Col4">Stuff 4</td>
<td class="Col5">Stuff 5</td>
</tr>
</table>
<br />
<table>
<tr>
<td><input name="Col1" type="checkbox" checked="checked" /></td>
<td><input name="Col2" type="checkbox" checked="checked" /></td>
<td><input name="Col3" type="checkbox" checked="checked" /></td>
<td><input name="Col4" type="checkbox" checked="checked" /></td>
<td><input name="Col5" type="checkbox" checked="checked" /></td>
</tr>
</table>
Javascript
$('input:checkbox').change(function(){
var ColToHide = $(this).attr("name");
if(this.checked){
$("td[class='" + ColToHide + "']").show();
}else{
$("td[class='" + ColToHide + "']").hide();
}
$('div#Debug').text("hiding " + ColToHide);
});
$(document).ready(function(){
$('table tr input:checkbox').change(function(){
var num = $(this).parents("th").index();
alert(num);
if($(this).is(":checked"))
{
$('table tbody tr td').eq(num).show();
}else
{
$('table tbody tr td').eq(num).hide();
}
});
});
JS FIDDLE LINK
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Show and Hide Columns in a Table</title>
<link href="CSS/table.css" rel="stylesheet" />
<script src="scripts/jquery-1.11.1.min.js"></script>
<script>
$(function () {
var $chk = $("#grpChkBox input:checkbox");
var $tbl = $("#someTable");
$chk.prop('checked', true);
$chk.click(function () {
var colToHide = $tbl.find("." + $(this).attr("name"));
$(colToHide).toggle();
});
});
</script>
</head>
<body>
<h2>Show and Hide Columns in a Table</h2>
<p>Click on each Checkbox to hide corresponding Column</p>
<div id="grpChkBox">
<p><input type="checkbox" name="empid" /> Employee ID</p>
<p><input type="checkbox" name="fname" /> First Name</p>
<p><input type="checkbox" name="lname" /> Last Name</p>
<p><input type="checkbox" name="email" /> Email</p>
<p><input type="checkbox" name="phone" /> Phone</p>
</div>
<table id="someTable">
<thead>
<tr>
<th class="empid">EmpId</th>
<th class="fname">First Name</th>
<th class="lname">Last Name</th>
<th class="email">Email</th>
<th class="phone">Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td class="empid">E342</td>
<td class="fname">Bill</td>
<td class="lname">Evans</td>
<td class="email">Bill#devcurry.com</td>
<td class="phone">234-2345-2345</td>
</tr>
<tr>
<td class="empid">E343</td>
<td class="fname">Laura</td>
<td class="lname">Matt</td>
<td class="email">laura#devcurry.com</td>
<td class="phone">123-1234-5678</td>
</tr>
<tr>
<td class="empid">E344</td>
<td class="fname">Ram</td>
<td class="lname">Kumar</td>
<td class="email">ram#devcurry.com</td>
<td class="phone">345-3456-7890</td>
</tr>
</tbody>
</table>
</body>
</html>
You can add an "id" on your "th" element and simply call:
$('#yourId').hide();
here is the code I've utilized :
$(document).on('click', '.form-check-input', function(e){
var finition_checked = $('#finition_select[type="checkbox"]:checked').map(function(){
return $(this).prop('checked');
}).get();
var size_checked = $('#size_select[type="checkbox"]:checked').map(function(){
return $(this).prop('checked');
}).get();
if (finition_checked && size_checked.length === 0){
$('#price-container').hide();
$('.table-responsive').show();
$('#col_size').hide();
};
if (finition_checked.length === 0 && size_checked){
$('#price-container').hide();
$('.table-responsive').show();
$('#col_finition').hide();
};
if(size_checked && finition_checked){
$('#price-container').hide();
$('.table-responsive').show();
}
if(size_checked.length === 0 && finition_checked.length === 0){
$('#price-container').show();
$('.table-responsive').hide();
};
console.log(finition_checked, size_checked)
var unique_value = [];
var finition = [];
var size = [];
//more logic to come
});