Как использовать JavaScript для динамического получения значения флажка

Question

Я новичок в JavaScript.

У меня есть веб-страница, на которой пользователи могут искать идентификатор документа и добавлять его в избранное.после отправки критерия поиска, он показывает идентификатор списка и флажок рядом с ним.поэтому пользователь может установить или снять флажок, чтобы добавить и удалить их из своего списка.

Моя проблема в том, что мой код не может получить значение сгенерированного флажка.например, есть три сгенерированных флажка, 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

ID в JS должны быть уникальными.Используйте класс 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
    });
  }
});

Answer 2

Минимальным изменением будет передать this в myfc:

onchange="myfc(this)"

... и затем использовать это в myfc:

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

Но выможет взглянуть на более современную обработку событий с addEventListener и т.иметь более одного флажка с одним и тем же id, поэтому, вероятно, лучше всего полностью удалить часть id="myCheckbox".