javascript - 为什么我的复选框数组在 jquery ajax 中返回长度为零

Question

我使用 jquery ajax 从数据库动态生成复选框来调用我的 Web api。问题是我试图获取复选框数组的长度，但在调试时不断收到为零的数组长度。请问我的代码可能有什么问题。HTML 代码

                      <div class="panel-body">
                        <form method="post">
                            <div class="form-group">
                                <label>Add Role Name</label>
                                <input type="text" class="form-control" placeholder="Role Name" />
                            </div>
                            <div class="col-md-6">
                                <div class="well">
                                    <fieldset id="appName">

                                    </fieldset>

                                </div>
                                <input id="saveUrl" type="button" value="Add Role" class="btn btn-success pull-right" />
                            </div>

                        </form>

                    </div>

JQUERY 代码

 <script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            method: 'GET',
            url: 'http://localhost:61768/api/users/GetUrls',
            headers: {
                'Authorization': 'Basic ' + btoa(localStorage.getItem('ApplicationId') + ":" + localStorage.getItem('ApiKey'))
            },
            success: function (data) {
                if (Object.keys(data).length == 0) {
                    alert("Ewoo");
                } else {

                    $.each(data, function (index, value) {
                        var input = ('<label><input type="checkbox" name="chk[]" value=' + value.Id + ' />' + value.UrlName + '</label><br>');
                        $('#appName').append(input); //Where I generate the checkboxes
                    });
                }

            },
            error: function () {
                alert("DonDy");
            }
        });
        var $checkboxes = $('input[name="chk[]"]:checked'); //Checkbox array
        $('#saveUrl').click(function () {
            if ($checkboxes.length > 0) {
                alert("Good");

            } else {
                alert("Bad"); //Result.
            }
        });
    });

</script>

点击保存按钮的结果是警告错误

Answer 1

在此代码中，复选框被附加，但您没有选中该复选框

  var input = ('<label><input type="checkbox" name="chk[]" value=' + value.Id + ' />' + value.UrlName + '</label><br>');

这里您正在检查选中复选框的长度..因此警告错误:

var $checkboxes = $('input[name="chk[]"]:checked');

在保存网址中尝试这个和那个点击功能:

 $('#saveUrl').click(function () {
    var $checkboxes = $('input[name="chk[]"]');
                if ($checkboxes.length > 0) {
                    alert("Good");

                } else {
                    alert("Bad"); //Result.
                }
            });