Javascript:如何从“动态”创建的复选框中获取值

时间:2018-12-01 13:20:00

标签: javascript

所以我要根据数据库中的记录动态创建/渲染复选框。 当前,这是“显示”这些复选框的方法:

function formatBranch(branch) {
    return (
      "<p>\n" +
      "  <label>\n" +
      "  <input id=" + branch['name'] + " type=\"checkbox\" class=\"filled-in libraryCheckbox\">\n" +
      "  <span>" + branch['name'] + "</span>\n" +
      "  </label>\n" +
      "</p>"
    );
}

我现在需要检查选中了哪些复选框,并检索那些/这些特定的复选框,因为我将使用它们来过滤搜索。关于如何实现这一目标的任何想法?

感谢您的帮助:)

1 个答案:

答案 0 :(得分:1)

要使用纯js获取所有复选框值:

let chks = document.getElementsByTagName("input");
for(var i = 0; i < chks.length; i++) {
  if(chks[i].type == "checkbox") {
    if (chks[i].checked) {
      // the checkbox is clicked
    } else {
      // checkbox is not clicked
    }
  }  
}

您可以使用它来构建过滤器数组或类似的内容

如果要点击操作,请执行以下操作:

let chks = document.getElementsByTagName("input");
for(var i = 0; i < chks.length; i++) {
  if(chks[i].type == "checkbox") {
    chks[i].addEventListener('change', function(e){
      if (e.target.checked) {
        // clicked
      } else {
        // not clicked
      }
    });
  }  
}