Question

能否请您看一下这个演示，让我知道如何将事件监听器和处理程序添加到#checker按钮上，以使用核心JavaScript方式选中值为Benz的复选框（没有jQuery）

function checkBenz(){

}

var el = document.getElementById("checker");
el.addEventListener("click", checkBenz);

<button id="checker">Check Benz</button> <br />
<input type="checkbox" name="cars" value="Benz"> Benz <br />
<input type="checkbox" name="cars" value="BMW"> BMW <br />

Answer 1

复选框具有checked属性。将其设置为true以便使用纯JavaScript选中您的复选框。

function checkBenz(){
  var benz = document.querySelector('input[value="Benz"]');
  benz.checked = !benz.checked;
  //or simply benz.checked = true,  if you don't want to toggle
}

var el = document.getElementById("checker");
el.addEventListener("click", checkBenz);

<button id="checker">Check Benz</button> <br />
<input type="checkbox" name="cars" value="Benz"> Benz <br />
<input type="checkbox" name="cars" value="BMW"> BMW <br />

Answer 2

这是处理复选框的选中/取消选中的通用方法。给定您拥有的复选框的值以及您要放入的状态-您可以更改复选框

function checkByName(value, check) {
    // given a checkbox value, check/un-check it
    var cbs = document.querySelectorAll('[value='+value+']')

    cbs.forEach(function(elem, ind) {
      elem.checked = check
    })
  }

现在您可以使用按钮上的click事件触发此操作

var btn = document.getElementById('checker')
btn.addEventListener('click', function() {
  checkByName('Benz', true)
})

使用核心JavaScript和事件处理程序选中复选框

2 个答案: