2017-04-25 23 views
-1

我正在向我的數據庫發送一個發佈請求,根據響應,我在JSP頁面中動態創建新的複選框。像這樣(這裏getMediums功能是在我的JSP頁面的另一個組件的onclick事件處理程序):動態添加複選框值不起作用

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/>"; 
     }) 
    } 
}); 
} 

的複選框獲得創建按預期。的onclick功能:

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

} 

當我點擊動態創建一個複選框,執行進入的medCheckboxOnClick()功能,這樣的事情出來:

checkbox for class 1 and medium undefined has been unchecked 

t仍然是不確定的,雖然我設置創建複選框時,前一個函數中複選框的值。此外,它總是考慮UNCHECK,無論我是否已選中或取消選中複選框。這裏currentClass是一個全局JavaScript變量,並且tutoringInfoAcademic已被設置爲來自我的控制器類的會話屬性。它已被聲明如下:

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

爲什麼複選框的值保持未定義?爲什麼我總是得到click事件處理程序捕獲的不檢查事件?

回答

0

通過寫

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

然後該函數將具有一個參數,即複選框找到了解決辦法。

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{ 
// 
}