How to get this code from CSS to JavaScript

Question

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.

I mean, if you must redo perfectly reasonable CSS in JavaScript, just wrap the CSS selector in querySelector and set the appropriate style property. — Heretic Monkey
– Heretic Monkey, Commented May 26, 2020 at 12:40
you can change the style of the element by using name.style.display = " " Check this for more info on this w3schools.com/howto/howto_js_toggle_hide_show.asp — Hisham Bawa
– Hisham Bawa, Commented May 26, 2020 at 12:48

Asher · Accepted Answer · 2020-05-26 12:57:39Z

0

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/

answered May 26, 2020 at 12:57

Asher

701 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Józef Podlecki · Accepted Answer · 2020-05-26 13:00:02Z

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.

yunzen · Accepted Answer · 2020-05-26 13:19:45Z

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>&#x2642;</td>
  </tr>
  <tr class="women">
    <td>Emma</td>
    <td>Johnson</td>
    <td>&#x2640;</td>
  </tr>
  <tr class="women">
    <td>Sophia</td>
    <td>Wilson</td>
    <td>&#x2640;</td>
  </tr>
  <tr class="men">
    <td>Mason</td>
    <td>Jones</td>
    <td>&#x2642;</td>
  </tr>
  <tr class="men">
    <td>William</td>
    <td>Davis</td>
    <td>&#x2642;</td>
  </tr>
  <tr class="men">
    <td>Liam</td>
    <td>Williams</td>
    <td>&#x2642;</td>
  </tr>
  <tr class="women">
    <td>Olivia</td>
    <td>Miller</td>
    <td>&#x2640;</td>
  </tr>
  <tr class="men">
    <td>Jacob</td>
    <td>Brown</td>
    <td>&#x2642;</td>
  </tr>
  <tr class="women">
    <td>Ava</td>
    <td>Moore</td>
    <td>&#x2640;</td>
  </tr>
  <tr class="women">
    <td>Isabella</td>
    <td>Taylor</td>
    <td>&#x2640;</td>
  </tr>
</table>

Rashik Karmacharya · Accepted Answer · 2020-05-27 15:21:09Z

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/

Collectives™ on Stack Overflow

How to get this code from CSS to JavaScript

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Related