How to populate checkboxes using JavaScript in Laravel 5.2

Question

I want to populate a list of check boxes dynamically using JavaScript. I have done the following:

In my balde view:

<div  id="demo" class="collapse" > 
    <div class="panel panel-default" >
          <div class="panel-body" id="demos" style="max-height: 100px;overflow-y: scroll;" >

             <input type="checkbox" name="specific[]" value=" "> <br>

           </div>    
     </div>
 </div>

My script:

$(document).ready(function(){
     $('#ItemID').on('change',function(e){
        console.log(e);
        var itemID= e.target.value;


        $.getJSON('/xxxxx/list?itemID=' + itemID, function(data){
           $('#demos').empty();
           $.each(data,function(index, subcatlist){
               $('#demos').append('<input value="'+subcatlist[0].ID+'">'+subcatlist[0].Name+'</input>');
            });
          });             
        });
      });

route.php passes wanted data.

I want my view to be like this, a checkbox followed by Names:

But what I'm getting is this:

I am getting Names to the view, but the leading check box is missing and replaced with a textbox. How do I fix this problem?

in you append call you are not giving type="checkbox". Can you please try that. — Deendayal Garg
– Deendayal Garg, Commented Sep 15, 2016 at 8:03

Sachith Muhandiram · Accepted Answer · 2016-09-15 09:43:09Z

2

+50

Try this :

$('#demos').append('<input type="checkbox" value="' + subcatlist[0].ID + '"/>' + subcatlist[0].Name);

I think this will solve the problem.

edited Sep 15, 2016 at 9:43

Sachith Muhandiram

2,97811 gold badges54 silver badges113 bronze badges

answered Sep 15, 2016 at 8:04

LkPark

5664 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Deendayal Garg · Accepted Answer · 2016-09-15 08:09:42Z

1

There are couple of things which are wrong.

as I have mentioned in the comment, you have missed type="checkbox".
subcatlist should be data and instead of using using 0 , use index.

so your code should be like below.

$.each(data, function (index, subcatlist) {
        $('#demos').append('<input value="' + data[index].ID + '" type="checkbox">' + data[index].Name + '</input>');
    });

answered Sep 15, 2016 at 8:09

Deendayal Garg

5,1462 gold badges21 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to populate checkboxes using JavaScript in Laravel 5.2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related