Try
var checkboxes = document.querySelectorAll('input[type=checkbox]');
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener('click', function() {
var targetClass = checkbox.getAttribute('data-target-class');
var rows = document.querySelectorAll('tr.' + targetClass);
rows.forEach(function(row) {
if(checkbox.checked == true) {
row.style.display = "table-row";
} else {
row.style.display = "none";
}
});
});
});
https://jsfiddle.net/dwkp2so3/
JS equivalent for that is quite complex. Especially if you are not using any framework.
Example
const table = document.querySelector("#table");
const checkboxes = Array.from(document.querySelectorAll("input"));
const data = {
mannen: [{
name: 'Noah',
surname: 'Smith'
}, {
name: 'William',
surname: 'Davis'
}],
vrouwen: [{
name: 'Emma',
surname: 'Johnson'
}, {
name: 'Sophia',
surname: 'Wilson'
}]
}
const state = {
mannen: false,
vrouwen: false,
allen: false
}
const createElements = (list) => {
for (let obj of list) {
const row = document.createElement("tr");
for (let value of Object.values(obj)) {
const cell = document.createElement("td");
const textNode = document.createTextNode(value);
cell.appendChild(textNode);
row.appendChild(cell);
}
table.appendChild(row);
}
}
for (let checkbox of checkboxes) {
checkbox.addEventListener("change", (event) => {
const value = event.target.value;
const checked = event.target.checked;
state[value] = checked;
while (table.childElementCount > 1) {
table.removeChild(table.lastChild);
}
if(state.allen) {
createElements([...data.mannen, ...data.vrouwen])
return;
}
for(let [key,] of Object.entries(state).filter(([, enabled]) => enabled)) {
createElements(data[key]);
}
});
}
<form id="form">
<label class="checkbox-inline">Mannen </label> <input name="checkbox" value="mannen" type="checkbox">
<label class="checkbox-inline">Vrouwen</label> <input name="checkbox" value="vrouwen" type="checkbox">
<label class="checkbox-inline">Allen </label> <input name="checkbox" value="allen" type="checkbox">
</form>
<table id="table">
<tr>
<th>Voornaam</th>
<th>Familienaam</th>
<th>Geslacht</th>
<th>Foto</th>
</tr>
</table>
Of course this doesnt handle matching column headers with column values, incremental deletion, addition of records and lastly alphabetical sorting.
My solution would be like this
"use strict";
console.clear()
{
const controller = document.getElementById('gender-controller')
const view = document.getElementById('gender-view')
const model = {show: 'all'}
const checkInput = e => {
const list = e.target.form['gender-selection']
const value = list.value
const selection = Array.from(list.values()).reduce((agg, el) => {
return el.value === value ? el : agg
}, null)
model.show = selection.dataset.viewValue
update()
}
const update = () => {
view.dataset.view = model.show
}
controller.addEventListener('input', checkInput)
}
.men, .women {
display: none;
}
[data-view="A"] .men,
[data-view="A"] .women {
display: table-row;
}
[data-view="M"] .men {
display: table-row;
}
[data-view="F"] .women {
display: table-row;
}
.men {
background-color: lightblue;
}
.women {
background-color: lightpink;
}
<form id="gender-controller">
<input type="radio" name="gender-selection" value="men" data-view-value="M" id="gender-selection-men"> <label class="checkbox-inline" for="gender-selection-men">Men</label>
<input type="radio" name="gender-selection" value="women" data-view-value="F" id="gender-selection-women"> <label class="checkbox-inline" for="gender-selection-women">Women</label>
<input type="radio" name="gender-selection" value="all" data-view-value="A" id="gender-selection-all" checked> <label class="checkbox-inline" for="gender-selection-all">All</label>
</form>
<table id="gender-view" data-view="A">
<tr>
<th>First name</th>
<th>Family name</th>
<th>Gender</th>
</tr>
<tr class="men">
<td>Noah</td>
<td>Smith</td>
<td>♂</td>
</tr>
<tr class="women">
<td>Emma</td>
<td>Johnson</td>
<td>♀</td>
</tr>
<tr class="women">
<td>Sophia</td>
<td>Wilson</td>
<td>♀</td>
</tr>
<tr class="men">
<td>Mason</td>
<td>Jones</td>
<td>♂</td>
</tr>
<tr class="men">
<td>William</td>
<td>Davis</td>
<td>♂</td>
</tr>
<tr class="men">
<td>Liam</td>
<td>Williams</td>
<td>♂</td>
</tr>
<tr class="women">
<td>Olivia</td>
<td>Miller</td>
<td>♀</td>
</tr>
<tr class="men">
<td>Jacob</td>
<td>Brown</td>
<td>♂</td>
</tr>
<tr class="women">
<td>Ava</td>
<td>Moore</td>
<td>♀</td>
</tr>
<tr class="women">
<td>Isabella</td>
<td>Taylor</td>
<td>♀</td>
</tr>
</table>
i have tried the solution given by Awais Zahid. have a look
var checkboxes = document.querySelectorAll('input[type=checkbox]');
var dispT = document.querySelectorAll('tr.allen');
dispT.hide();
let inputVal = [];
for(i = 0; i < checkboxes.length; i++) {
console.log(checkboxes[i]);
checkboxes[i].addEventListener('click', function(event) {
var attrData = this.getAttribute('data-target-class');
var row = document.querySelectorAll('tr.' + attrData);
console.log(checkboxes[i]);
row.forEach(function(row) {
console.log(row)
if(this.checked = true){
console.log('there is a match');
row.style.display = 'table-row';
}else {
row.style.display = 'none';
}
});
console.log(attrData);
});
}
check this too https://jsfiddle.net/qost3r9u/
I have been trying to create a html with JavaScript to select men or women regarding on what checkbox I click. I was able to do this using CSS but do not have a clue on how I would get this with JavaScript.
Here is my code on jsfiddle with my html and CSS –> https://jsfiddle.net/muv215cn/
.vrouwen, .mannen { display: none }
[data-target-class="allen" ]:checked ~ table .vrouwen,
[data-target-class="allen" ]:checked ~ table .mannen,
[data-target-class="vrouwen"]:checked ~ table .vrouwen,
[data-target-class="mannen" ]:checked ~ table .mannen { display: table-row }
<div class="Geslachtskeuze">
<label class="checkbox-inline">Mannen </label> <input type="checkbox" data-target-class="mannen" >
<label class="checkbox-inline">Vrouwen</label> <input type="checkbox" data-target-class="vrouwen">
<label class="checkbox-inline">Allen </label> <input type="checkbox" data-target-class="allen" >
<table>
<tr>
<th>Voornaam</th>
<th>Familienaam</th>
<th>Geslacht</th>
<th>Foto</th>
</tr>
<tr class="mannen allen">
<td>Noah</td>
<td>Smith</td>
<td><img src="man.png" alt=""></td>
<td><img src="man1.jpg" alt=""></td>
</tr>
<tr class="vrouwen allen">
<td>Emma</td>
<td>Johnson</td>
<td><img src="vrouw.png" alt=""></td>
<td><img src="vrouw1.jpg" alt=""></td>
</tr>
<tr class="vrouwen allen">
<td>Sophia</td>
<td>Wilson</td>
<td><img src="vrouw.png" alt=""></td>
<td><img src="vrouw2.jpg" alt=""></td>
</tr>
<tr class="mannen allen">
<td>Mason</td>
<td>Jones</td>
<td><img src="man.png" alt=""></td>
<td><img src="man2.jpg" alt=""></td>
</tr>
<tr class="mannen allen">
<td>William</td>
<td>Davis</td>
<td><img src="man.png" alt=""></td>
<td><img src="man3.jpg" alt=""></td>
</tr>
<tr class="mannen allen">
<td>Liam</td>
<td>Williams</td>
<td><img src="man.png" alt=""></td>
<td><img src="man4.jpg" alt=""></td>
</tr>
<tr class="vrouwen allen">
<td>Olivia</td>
<td>Miller</td>
<td><img src="vrouw.png" alt=""></td>
<td><img src="vrouw3.jpg" alt=""></td>
</tr>
<tr class="mannen allen">
<td>Jacob</td>
<td>Brown</td>
<td><img src="man.png" alt=""></td>
<td><img src="man5.jpg" alt=""></td>
</tr>
<tr class="vrouwen allen">
<td>Ava</td>
<td>Moore</td>
<td><img src="vrouw.png" alt=""></td>
<td><img src="vrouw4.jpg" alt=""></td>
</tr>
<tr class="vrouwen allen">
<td>Isabella</td>
<td>Taylor</td>
<td><img src="vrouw.png" alt=""></td>
<td><img src="vrouw5.jpg" alt=""></td>
</tr>
</table>
</div>
Question –> How would I be able to use JavaScript instead of CSS to get the same result? I have been struggling and can’t seem to get it to work using JavaScript.
