I'm trying to create dynamic checkboxes using AJAX so that on the basis of categories the number of checkboxes should appear on screen I've sample code in HTML that I want to convert in JS
HTML Code
<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 Code
<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>
Aucun commentaire:
Enregistrer un commentaire