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

问题描述：

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

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

的结果点击保存按钮报警AJAX调用内部的坏

Ajax调用是异步的。意味着你的'$（'＃saveUrl'）。click'可能会在ajax调用可能已经获取复选框之前执行。尝试将该代码块添加到ajax调用的成功处理程序中。 – kaushik94

@ kaushik94提到的内容是相当真实的，因为它是'异步'，最好将click事件移入成功调用，而+，你可能需要将'click'事件绑定到文档而不是复选框点击，因为动态生成复选框可能不在'DOM'中 – Se0ng11

答

在这段代码复选框被越来越添加数据，但你不勾选复选框

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

在这里，你正在检查检查checkbox..hence提醒的长度差：

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

试试这个，到内部保存网址点击功能：

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

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

答

由于要填充/创建复选框，则应该有$checkboxes里面#saveUrl函数，bec在这之前，当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返回零长度

相关推荐