Question

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

                      <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 CODE

 <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.
                }
            });

Answer 2

由于您在AJAX调用中填充/创建复选框，因此您应该在$checkboxes函数中使用#saveUrl ，因为在此之前，JS时它将为空已加载。单击#saveUrl时需要此变量，因此在触发checked时应检查#saveUrl输入：

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

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

为什么我的复选框数组在jquery ajax中

2 个答案: