如何将此 jquery 转换为纯 javascript？

Question

您好，如果可能的话，我想将以下内容转换为纯JS。

我的最终目标是显示 var "bar" 如果选中了带有 id ("checkbox1"、"checkbox2"、"checkbox3") 的复选框 + 显示相应的 id ("item1", "item2", "item3").

$('input:checkbox').change(function () {
    if ($(this).is(':checked')) {
        switch (this.id){
            case 'checkbox1':
                bar.show();
                item1.show();
                break;
            case 'checkbox2':
                bar.show();
                item2.show();
                break;
            case 'checkbox3':
                bar.show();
                item3.show();
                break;
            default:
                bar.hide();
        }
    } else {
        bar.hide();
    }
});

我怎样才能做到这一点？

Answer 1

为了 select 一个 HTML 元素，您可以使用 document class 方法（例如 document.getElementsByTagName）。
如jQuery's documentation中所写，show()和hide()实际上修改了HTML元素的display属性。

Answer 2

试试这个代码示例。

const ids = ["item1", "item2", "item3"]

document.addEventListener("change", function(event) {
  if (event.target.matches('input[type="checkbox"]')) {
    const checkboxes = document.querySelectorAll('input[type="checkbox"]')
    let checked = []
    
    checkboxes.forEach(function (cb) {
      if (cb.checked) checked.push(cb)
    })
      
    const checkedIds = checked.map(cb => cb.id)
    
    if (isSubArray(ids, checkedIds)) {
      document.querySelector("#var").style.display = "block"
    } else  {
      document.querySelector("#var").style.display = "none"
    }
    
    document.querySelector("#cb-ids").innerHTML = checkedIds
  }
})

function isSubArray(arr1, arr2) {
  return arr1.every( el => arr2.includes(el))
}

<p id="var" style="display: none">var</p>

<p id="cb-ids"></p>

<label for="item1"> 
  <input id="item1" type="checkbox" />
   Item 1 
<label/>
<label for="item2"> 
  <input id="item2" type="checkbox" />
   Item 2 
<label/>
<label for="item3"> 
  <input id="item3" type="checkbox" />
   Item 3
<label/>
<label for="item4"> 
  <input id="item4" type="checkbox" />
   Item 4
<label/>

如何将此 jquery 转换为纯 javascript？

How do I convert this jquery to pure javascript?

javascript

checkbox

jquery

oncheckedchanged

checked