Popular checkbox with jQuery

Asked

Viewed 100 times

0

I need to popular the input with data coming from jQuery.

I got the following input:

 <label>
    <input type="checkbox" id="turmas"/>
</label>

In the jQuery I have the following code:

    var turma= JSON.parse(data); 
    $.each(turma, function() {
       count++;
    });
    for (var i = 0; i < count; i++) {   
      $('<input>').val(turma['turma'][i]).text(turma['turma'][i]).appendTo('#turmas'); 
    }

Structure of JSON:

{"Turma A", "Turma B"}

I switched the <input> for <label> and he shows the classes, but he doesn’t show the checkboxes.

jquery json checkbox

  • Larissa, there’s little code there! You can’t run/simulate your code. Do you want to be popular with data coming via ajax or directly in the rendering you’re doing with PHP? Post the rest of the code...

  • It is not recommended to use the comment to implement your question. To do so, edit your question and add the information you want to complement. Remember this information I mentioned.

  • data comes in array form by ajax

  • What is the structure of this JSON? Where do you want to "fit" the checkboxes? Inside the label? In your script it goes into the input. It’s wrong! See: appendTo() / Another thing, you’ve done one Tour? Another recommended reading: Inquiry - help center

  • Edit the question, heart!

1 answer

2


For starters, look at this:

json structure: {"Class A", "Class B"}

Your JSON follows a wrong syntax! See:

jsonlint.com

Test your Jsons with Jsonlint!

A quick explanation:

  1. {} (keys) for objects. Therefore, you need to enter the property:

    { "nome" : "LipESprY" }

  2. [] (brackets) for vectors (list). Therefore, we do not declare the property:

    ["Valor 1", "Valor 2", "Valor 3"]

  3. If we have more than one object, then we should put them inside a vector (list):

    [{
    "nome": "LipESprY"
}, {
    "nome": "Larissa"
}]

Your JSON fixed, it looks like this:

["Turma A", "Turma B"]

Obviously you can improve your JSON a lot. But it is not the goal of my answer to "improve" what does not refer to the problem. I only mentioned this problem due to need to fix it.

Now to popular the data, can do so:

<!DOCTYPE html>
<html>
    <head>
        <title>Popular checkbox por LipESprY</title>
        <!-- <script type="text/javascript" src="jquery-3.3.1.min.js"></script> -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <label id="lb_checkbox">
        </label>
    </body>
    <script type="text/javascript">

        data = JSON.parse('["Turma A", "Turma B"]');

        for (let valor of data) {
            $("<input type='checkbox' value='"+valor+"'>"+valor+"<br>").appendTo('#lb_checkbox');
        }

    </script>
</html>

That’s what I was able to develop with the little code you posted, after a lot of effort! Now it’s up to you to adapt to your project...

Browser other questions tagged jquery json checkbox

You are not signed in. Login or sign up in order to post.