Question

我正在向我的数据库发送一个帖子请求，根据响应，我在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事件处理程序捕获的uncheck事件？

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

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

1 个答案: