Question

我正在尝试使用AJAX创建动态复选框，以便在类别的基础上复选框的数量应显示在屏幕上。我在HTML中编写了我想用JS转换的代码。

HTML代码

<div id="check-awesome" class="form-group checkbox">
    <input type="checkbox" id="History">
    <label for="History">
        <span></span>
        <span class="check"></span>
        <span class="box"></span>
        History
    </label>
</div>

AJAX代码

<script>
    $(document).ready(function(){
        $.ajax({
            type:'post',
            url:'/categories',
            contentType:'application/json',
            data: '{"_token":"<?php echo csrf_token() ?>"}',
            success:function(data) {
                for(i=0; i<=data.category_name.length;i ++)
                {
                    var checkbox = document.createElement('input');
                    checkbox.type="checkbox";
                    checkbox.value=data.category_name.category_id;
                    checkbox.id=data.category_name[i].category_name;
                    var label= document.createElement('label');
                    label.htmlFor=data.category_name[i].category_name;
                    var span=document.createElement('span');
                    label.appendChild(span);
                    var span1=document.createElement('span');
                    span1.className="check";
                    label.appendChild(span1);
                    var span2=document.createElement('span');
                    span2.className="box";
                    label.appendChild(span2);
                    label.appendChild(document.createTextNode(data.category_name[i].category_name));
                    var div= document.getElementById('check-awesome');
                    div.appendChild(label);
                    div.appendChild(checkbox);
                }
                return div;
            }
        });
    });
</script>

Answer 1

我认为你在for循环中犯了一个错误。使用操作'＆lt;'如果使用数组进行处理，则代替'＆lt; ='。

记住数组的索引从0开始而不是1

Answer 2

您在循环中创建了div check-awesom。但是你必须将它声明出来。我在函数中使用了回调变量，所以当你的请求成功时，函数会在参数中用创建的div调用函数参数

   $(document).ready(function () {
            function createChecboxes(requestEndCallback) {
                $.ajax({
                    type: 'post',
                    url: '/categories',
                    contentType: 'application/json',
                    data: '{"_token":"<?php echo csrf_token() ?>"}',
                    async: true, // do this for synchronous call to ajax 
                    success: function (data) {
                        var div = document.getElementById('check-awesome');
                        for (i = 0; i < data.category_name.length; i++) {
                            var checkbox = document.createElement('input');
                            checkbox.type = "checkbox";
                            checkbox.value = data.category_name.category_id;
                            checkbox.id = data.category_name[i].category_name;
                            var label = document.createElement('label');
                            label.htmlFor = data.category_name[i].category_name;
                            var span = document.createElement('span');
                            label.appendChild(span);
                            var span1 = document.createElement('span');
                            span1.className = "check";
                            label.appendChild(span1);
                            var span2 = document.createElement('span');
                            span2.className = "box";
                            label.appendChild(span2);
                            label.appendChild(document.createTextNode(data.category_name[i].category_name));

                            div.appendChild(label);
                            div.appendChild(checkbox);
                        }
                        requestEndCallback(div)
                    }
                });
                return mydiv;
            }

            // call your function like this
            createChecboxes(function (createdDiv) {
                // use createdDiv in here
            })
        });

PS。正如@Tri所说，你还在for条件中写了<=而不是<。

Answer 3

您可以添加这样的复选框。

var place = document.getElementById('check-awesome');
for(i=0; i<=data.category_name.length;i ++)
 {
   var checkbox = document.createElement('input');
   checkbox.type="checkbox";
   checkbox.value=data.category_name.category_id;
   checkbox.id=data.category_name[i].category_name;

   var label= document.createElement('label');
   label.htmlFor=data.category_name[i].category_name;
   var span=document.createElement('span');
   label.appendChild(span);
   var span1=document.createElement('span');
   span1.className="check";
   label.appendChild(span1);
   var span2=document.createElement('span');
   span2.className="box";
   label.appendChild(span2);
          label.appendChild(document.createTextNode(data.category_name[i].category_name));
   var div= document.createElement('div');
   div.appendChild(label);
   div.appendChild(checkbox);
   place.appendChild(div);
}

Answer 4

我已经弄清楚了实际上我的乱七八糟的实际上这些复选框有点不同，需要在创建后才追加，因此代码应该是这样的。谢谢大家的帮助！ :)

<script>
   $(document).ready(function(){
     $.ajax({
       type:'post',
       url:'/categories',
       contentType:'application/json',
       data: '{"_token":"<?php echo csrf_token() ?>"}',
       success:function(data) {
         for(i=0; i<=data.category_name.length;i ++)
           { 
             var div= document.createElement('div');
             div.id="check-awesome";
             div.className="form-group checkbox"
             var checkbox = document.createElement('input');
             checkbox.type="checkbox";
             checkbox.value=data.category_name.category_id;
             checkbox.id=data.category_name[i].category_name;
             div.appendChild(checkbox);
             var label= document.createElement('label');
             label.htmlFor=data.category_name[i].category_name;
             var span=document.createElement('span');
             label.appendChild(span);
             var span1=document.createElement('span');
             span1.className="check";
             label.appendChild(span1);
             var span2=document.createElement('span');
             span2.className="box";
             label.appendChild(span2);
             label.appendChild(document.createTextNode(data.category_name[i].category_name));
             div.appendChild(label);
             var get_div=document.getElementById('checkboxparent');
             get_div.appendChild(div);
           }
         return get_div;
       }
     });
   });
</script>

如何使用AJAX基于数据库中的值创建动态复选框？

4 个答案: