如何使用javascript动态获取选中复选框的值

Question

我是JavaScript新手。

我有一个网页，用户可以搜索文档ID并将其添加到他们的收藏夹中。 提交搜索条件后，它会显示一个列表ID和旁边的复选框。 因此用户可以选中或取消选中该复选框，以将其添加或从列表中删除。

我的问题是我的代码无法获取生成的复选框的值。 例如，生成了三个复选框chk1，chk2，chk3。 当没有一个被选中时，我的代码正在运行，我可以获得复选框的值。 但是例如当其中之一被选中时，chk3被选中，而当我检查chk1时，它仍然显示chk3的值而不是chk1。 我想获取刚刚选中的复选框的值。 我努力使它正确。

  <tr><%do until results_rs.EOF%>
   <td class="tdid"><%Response.Write results_rs("id")%></td> 
   <td><input type="checkbox" id="myCheckbox" name ="myf[]" value="<%=results_rs("id")%>" onchange="myfc()">
   <script>

     function myfc(){
     var selchb = getSelectedChbox(this.form);
     alert(selchb)
     }


     function getSelectedChbox(frm) {
         var selchbox = null;
           var chk_arr=document.getElementsByName("myf[]")
           var chklength=chk_arr.length

           for (k = 0; k < chklength; k++) {
               if (chk_arr[k].checked == true)
                 selchbox=chk_arr[k].value
               }
             return selchbox

       **strong text**// rs.close;
       // connection.close
       } 

</script></td>
    <%results_rs.MoveNext%>
    </tr>

Answer 1

最小变动将通过this进入myfc ：

onchange="myfc(this)"

...然后在myfc使用它：

 function myfc(cb){
    alert(cb.value);
 }

但是您可能会使用addEventListener等研究更现代的事件处理。

---

请注意，不需要在复选框上放置一个id ，实际上，具有多个具有相同id复选框是无效的，因此最好将id="myCheckbox"部分完全删除。

Answer 2

JS中的ID必须是唯一的。 使用类class="myCheckbox"

那你可以做

window.addEventListener("load",function() {
  var checks = document.querySelectorAll(".myCheckbox");
  for (var i=0;i<checks.length;i++) { // all .myCheckbox
    checks[i].addEventListener("click",function() {
      console.log(this.checked,this.value); // this specific box
      var checks = document.querySelectorAll(".myCheckbox:checked");
      for (var i=0;i<checks.length;i++) { // all CHECKED .myCheckbox
        console.log(checks[i].value); // only checked checkboxes are shown
      }
    });
  }
});

以您的情况为例

window.addEventListener("load",function() {
  var checks = document.querySelectorAll(".myCheckbox");
  for (var i=0;i<checks.length;i++) { // all .myCheckbox
    checks[i].addEventListener("click",function() {
      if (this.checked) myfc(this.value); // this specific box
    });
  }
});