时间戳

首页 > 解决方案 > 追加后如何增加复选框ID - JQuery

javascript - 追加后如何增加复选框ID - JQuery

问题描述

我有一个默认的复选框，其他复选框将在我单击添加按钮后出现。我需要检查是否选中了复选框。但这里的问题是我的 jquery 仅适用于默认复选框。代码如下：

HTML：

<form_answer>
<input type="hidden" class ="" id="correct_hidden" name="correct_hidden[][correct]" value="0"/>           
<input type="checkbox" class ="" id="correct" name="correct[][correct]"/>
<button class="" id = "btn_add"> Add</button>
</form_answer>

JS：

<script>
    $(document).ready(function(){
        $('#btn_add').click(function(){
            add_row();
        });
    });

    function add_row(){
        var id = $("#row").val();
        id++;
        var html =  '<div class="">  ' +
                    '<input type="hidden" class ="" id="correct_hidden" name="correct_hidden[][correct]" value="0"/> ' +
                    '<input type="checkbox" class ="" id="correct" name="correct[][correct]"/>' +
                    '</div>' ;
        $("form_answer").append(html);
        $("#row").val(id);
    } 


$(document).ready(function(){
    $("#correct").click(function () {
        if ($(this).prop("checked")) {
            $("#correct_hidden").val("1");
        }else{
            $("#correct_hidden").val("0");
        }
    });
});
</script>

上面的脚本仅适用于默认复选框。我需要脚本来处理所有新的附加复选框。我该如何解决这个问题？

标签： javascriptjqueryhtml

解决方案

Id 在 Html 中应该是唯一的。所以把它改成一个类。此外，您正在向 DOM 添加新元素。所以你应该在文档而不是元素本身上添加一个事件监听器。

删除 id 并将其放在类中：

<input type="checkbox" class ="correct" id="" name="correct[][correct]"/>

然后更改您的 js，使其不添加 id

var html =  '<div class="">  ' +
                    '<input type="hidden" class ="correct_hidden" id="" name="correct_hidden[][correct]" value="0"/> ' +
                    '<input type="checkbox" class ="correct" id="" name="correct[][correct]"/>' +
                    '</div>' ;

最后将事件监听器更改为文档并在此类上触发它

$(document).on('click', '.correct', function () {
    if ($(this).prop("checked")) {
        $("#correct_hidden").val("1");
    }else{
        $("#correct_hidden").val("0");
    }
});

推荐阅读