Dynamisch hinzugefügt Kontrollkästchen Wert funktioniert nicht

Question

Ich sende eine Post-Anfrage an meine Datenbank und entsprechend der Antwort, ich bin dynamisch erstellen neue Kontrollkästchen in meiner JSP-Seite. So (hier getMediums Funktion ist ein Onclick-Ereignishandler einer anderen Komponente in meiner JSP-Seite):

function getMediums(str) 
{ 
    currentClass = str; // save the current class 
     <% 
     String classStart = "<script>document.writeln(str)</script>"; 
     HashMap<String, ArrayList<String> > medSubjects; 
     if(!tutoringInfoAcademic.containsKey(classStart)){ // first click 
      medSubjects = new HashMap<>(); 
      tutoringInfoAcademic.put(classStart,medSubjects); // opening a blank map 
     } 
     else{ // already selected some medium of this class 
      medSubjects = tutoringInfoAcademic.get(classStart); 
     } 
      %> 

      // javascript code 
var data = {}; 
data["classStart"] = str; 
$.post('PopulateMedium',data,function(responseJson){ 
    if(responseJson!=null){ 
     var td = document.getElementById("mediums"); 
     $(td).empty(); // deletes previous contents 

     $.each(responseJson,function(key,value){ 

      var temp = value; 
      console.log(temp); // prints as per expected 
      var checked = ""; 
      <% 
       String t = "<script>document.writeln(temp)</script>"; 
       if(medSubjects.containsKey(t)){ 
        // already selected, so check this checkbox 
       %> 
       checked = "checked"; 
       <% 
       } 
      %> 
      td.innerHTML += " <input type='checkbox' onclick='medCheckboxOnClick()' name='mediumCheckbox' value=" + temp + " " +checked + "/>"; 
      if(value == 'bm')td.innerHTML += "Bangla medium" 
      else if(value == 'em')td.innerHTML += "English medium"; 
      else if(value == 'ev')td.innerHTML += "English version"; 


      td.innerHTML += "<br/>"; 
     }) 
    } 
}); 
} 

Die Kontrollkästchen wie geschaffen erhalten pro erwartet. Die Onclick-Funktion:

function medCheckboxOnClick(){ 

    var t = $(this).attr("value"); // bm, em, ev 
    console.log("entered into the checkbox onclick function"); 

    if($(this).is(":checked")) { 
     console.log("checkbox for class "+currentClass+" and medium "+t+" has been checked"); 

     <% 
     String id = "<script>document.writeln(t)</script>"; 
     String currentClassStart = "<script>document.writeln(currentClass)</script>"; 
     if(tutoringInfoAcademic.containsKey(currentClassStart)){ // redundant check 
      ArrayList<String> listOfSubjects = tutoringInfoAcademic.get(currentClassStart).get(id); 

      if(listOfSubjects == null){ // first clicked 
       listOfSubjects = new ArrayList<>(); 
       tutoringInfoAcademic.get(currentClassStart).put(id,listOfSubjects); 
       System.out.println(tutoringInfoAcademic.get(currentClassStart)); 
      } 
      else{ // list of subjects already created. either some subject has been chosen or not 


      } 
     } 

     %> 
    } 
    else{ 
     console.log("checkbox for class "+currentClass+" and medium "+t+" has been unchecked"); 

     <% 
     String ID = "<script>document.writeln(t)</script>"; 
     String curClassStart = "<script>document.writeln(currentClass)</script>"; 
     if(tutoringInfoAcademic.containsKey(currentClassStart)){ // redundant check 
      tutoringInfoAcademic.get(currentClassStart).remove(ID); 
     } 
     %> 
    }   

} 

Wenn ich auf eine der dynamisch erstellten Kontrollkästchen klicken, tritt die Ausführung der die medCheckboxOnClick() Funktion und so etwas wie dieses kommt aus:

checkbox for class 1 and medium undefined has been unchecked 

t undefiniert bleibt, obwohl ich das Set Wert des Kontrollkästchens in der vorherigen Funktion beim Erstellen der Kontrollkästchen. Außerdem wird immer UNCHECK berücksichtigt, unabhängig davon, ob ich die Checkbox aktiviert oder deaktiviert habe. Hier currentClass ist eine globale Javascript-Variable und tutoringInfoAcademic wurde als Sitzungsattribut von meiner Controller-Klasse festgelegt. Es wurde wie folgt erklärt:

HashMap<String, HashMap<String, ArrayList<String> > > tutoringInfoAcademic = new HashMap<>(); 

Warum wird der Wert der Checkbox undefiniert bleiben? Und warum bekomme ich immer das Ereignis "Uncheck", das vom Ereignishandler für Klicks erfasst wird?

Answer 1

Fand die Lösung von

td.innerHTML += " <input type='checkbox' onchange='medCheckboxOnClick(this)' name='mediumCheckbox' value='" + temp + "' " +checked + "/>"; 

Schreiben Und dann wird die Funktion einen Parameter haben, die das Kontrollkästchen ist.

function medCheckboxOnClick(cb){ 
//$('.med').click(function() { 
    //var t = $(this).attr("value"); // bm, em, ev 
    var t = $(cb).attr("value"); 
    console.log("entered into the checkbox onclick function"); 

if($(cb).is(":checked")) { 
// 
} 
else{ 
// 
}