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

Question

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

 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

如果我正确地理解了您-它会为您提供帮助。

<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 />
<script>
    function checkBenz(){
        document.querySelector("input[value=Benz]").setAttribute('checked','checked');
    }

    var el = document.getElementById("checker");
    el.addEventListener("click", checkBenz);
</script>

Answer 3

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

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

Answer 4

我希望这有帮助

 function checkBenz(){ document.querySelector(`input[value="Benz"]`).setAttribute("checked", "true"); } 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 />