如何将此代码从CSS转换为JavaScript

我一直在尝试用JavaScript创建一个html来选择我点击哪个复选框的男性或女性。我可以使用CSS来实现这一点，但我不知道如何使用JavaScript实现这一点

下面是我在JSFIDLE上的代码，以及我的html和CSS->

.vrouwen、.mannen{display:none} [数据目标类=艾伦]：选中~table.vrouwen， [数据目标类=艾伦]：选中~table.mannen， [数据目标类=vrouwen]：选中~table.vrouwen， [data target class=mannen]：选中~table.mannen{display:table row} 曼宁 沃文 艾伦 沃纳姆 家庭旅馆 格斯拉赫特 福托 诺亚 史密斯 艾玛 约翰逊 索菲娅 威尔逊 石匠 琼斯 威廉 戴维斯 利亚姆 威廉姆斯 奥利维亚 米勒 雅各布 棕色的 艾娃 摩尔 伊莎贝拉 泰勒 试一试

---

这方面的JS等价物相当复杂。特别是如果您没有使用任何框架

范例

const table=document.queryselectable； 常量复选框=Array.fromdocument.querySelectorAllinput； 常数数据={ 曼宁：[{ 名字：'诺亚'， 姓：史密斯 }, { 名字：“威廉”， 姓：“戴维斯” }], 瓦鲁温：[{ 姓名：“Emma”， 姓：“约翰逊” }, { 姓名：'索菲亚'， 姓：威尔逊 }] } 常量状态={ 曼宁：错， 弗洛温：错， 艾伦：错 } const createElements=list=>{ 对于列表的let obj{ const row=document.createElementtr； 对于Object.valuesobj的let值{ const cell=document.createElementtd； const textNode=document.createTextNodevalue； cell.appendChildtextNode； 行。子单元格； } 表1.2-3第行； } } 对于复选框的let复选框{ checkbox.addEventListenerchange，事件=>{ 常量值=event.target.value； const checked=event.target.checked； 状态[值]=已检查； 而table.childElementCount>1{ table.removeChildtable.lastChild； } 艾弗斯坦·艾伦{ createElements[…data.mannen，…data.vrouwen] 回来 } Object.entriesstate.filter[，enabled]=>的forlet[key，]已启用{ createElementsdata[键]； } }; } 曼宁 沃文 艾伦 沃纳姆 家庭旅馆 格斯拉赫特 福托

---

我的解决办法是这样的

严格使用； 控制台。清除 { const controller=document.getElementById'gender-controller' const view=document.getElementById'gender-view' 常量模型={show:'all'} 常量checkInput=e=>{ const list=e.target.form['gender-selection'] 常量值=list.value const selection=Array.fromlist.values.reduceAg，el=>{ 返回el.value==值？el:agg }，空 model.show=selection.dataset.viewValue 使现代化 } 常数更新==>{ view.dataset.view=model.show } controller.addEventListener'input'，checkInput } .男人，.女人{ 显示：无； } [data view=A]。男性， [data view=A]。女性{ 显示：表格行； } [data view=M]。男性{ 显示：表格行； } [data view=F]。女性{ 显示：表格行； } .男人{ 背景颜色：浅蓝色； } .妇女{ 背景颜色：浅粉色； } 男人 女人 全部的 名字 姓 性别 诺亚 史密斯 &x2642； 艾玛 约翰逊 &x2640； 索菲娅 威尔逊 &x2640； 石匠 琼斯 &x2642； 威廉 戴维斯 &x2642； 利亚姆 威廉姆斯 &x2642； 奥利维亚 米勒 &x2640； 雅各布 棕色的 &x2642； 艾娃 摩尔 &x2640； 伊莎贝拉 泰勒 &x2640；

---

我试过Awais Zahid给出的解决方案。看一看

  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);
    });
}

---

也请检查此项

我的意思是，如果您必须在JavaScript中重做完全合理的CSS，只需在querySelector中包装CSS选择器并设置适当的样式属性。为什么您需要从CSS更改为JS？您可以使用name.style.display=更改元素的样式，以获取有关此项的更多信息谢谢您的帮助！我已经找到了我所需要的现在我已经找到了我所需要的，但是无论如何谢谢你的帮助！

  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);
    });
}