动态添加的复选框值不起作用答案

【问题标题】：Dynamically added checkbox value doesn't work动态添加的复选框值不起作用
【发布时间】：2017-04-25 23:16:42
【问题描述】：

我正在向我的数据库发送一个发布请求，根据响应，我正在我的 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<>();

为什么复选框的值仍未定义？为什么我总是得到点击事件处理程序捕获的取消选中事件？

【问题讨论】：

标签： javascript jquery html jsp checkbox

【解决方案1】：

通过写作找到解决方案

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

【讨论】：