Question

我正在动态创建一组复选框，还有一个额外的复选框，用于同时选择所有组，也是动态生成的

这是html输出

<input type="checkbox" id="all">all
<br>
<input type="checkbox" name="question">a
<br>
<input type="checkbox" name="question">b
<br>
<input type="checkbox" name="question">c
<br>
<input type="checkbox" name="question">d

这是jquery

$("document").ready(function() {
    $("#all").on('change', function() {
        if ($(this).is(":checked")) {
            $("input[type=checkbox][name=question]").prop('checked', true);
        } else {
            $("input[type=checkbox][name=question]").prop('checked', false);
        }
    });     

});

这是实施。

当动态生成复选框时，它可以正常工作

但是当它们生成动态时代码有错误

我可以检查整个团队但是我无法检查单个复选框

这是动态生成的代码

$('#demo3').on('change', function() {
    if ($('input[type=checkbox]:checked')) {
        var value = $('input[type=checkbox]:checked').val();
        alert(value);
        $("#demo3").hide();

        $.getJSON("json/question.json", function(jd) {

            var size = jd.length;


            var table = "<table><tr><th><input id=\"" + "selectall" + "\" type=\"" + "checkbox" + "\"/>" +
                    "</th><th>Question</th><th>Option A</th>" + "<th>Option B</th><th>Option C</th>" +
                            "<th>Option D</th><th>Answer</th></tr>";


            for (var n = 0; n < size; n++) {


                table += "<tr><td>" + "<input name=\"" + "question" + "\" type=\"" + "checkbox" + "\" value=\"" + jd[n].questionid + "\"/>" + 
                "</td><td>" + jd[n].question + "</td>" + "<td>" + jd[n].a + "</td><td>" + jd[n].b + "</td>" + "<td>" + jd[n].c + "</td>" +
                        "<td>" + jd[n].d + "</td>" + "<td>" + jd[n].ans + "</td></tr>";


            }
            table += "</table>";
            $('#demo4').html(table);

        });

    }
});

$('#demo4').on('change', function() {
    if ($("input[type=checkbox][id=selectall]").is(":checked")) {
        $("input[type=checkbox][name=question]").prop('checked', true);
    } else {
        $("input[type=checkbox][name=question]").prop('checked',false);
    }

});

Answer 1

据我所知，demo4和demo3是像div这样的容器元素，你在其中添加一个具有动态HTML的表。

你可以尝试

  $('#demo4').on('change','#<checkboxid>',function() {

checkboxid将是您要跟踪的ID。

希望有所帮助！

检查动态创建的复选框组

1 个答案: