CODEWITHSUNDEEP
jqueryhtml
RoyBarOn
RoyBarOn

Reputation: 987

How to set values from Json to checkboxes?

I'm trying to retrieve input values from database to Crud menus that based on Bootstrap modals and datatables . With the text input there was no problem - i used this to retrieve : 

 var data_row = table.row($(this).parents('tr')).data();

  $("#edit_campagne").val(data_row.campagne)
        .find('option[value=" + data_row.campagne +"]').attr('selected', 
   true);

But with the checkboxes it's more complicated - their values are saved as json - like this : 

      {% for target in targets %} // I'm using TWIG 
         <div class="checkbox">
             <label>
               <input  class="animals_input" id = "{{ animals }}"
               // this generate id for each checkbox
                type="checkbox" value="0" name="animals_check[{{ animals 
               // this save values as Json -  {"dogs":"1","cats":"1"}
                }}]" >{{ animals  }}
              </label>
          </div>
       {% endfor %}

So when i retrive from DB the checkbox's values looks like this ( 1 is for checked) :

operation_target : "{"dogs":"1","cats":"1"}"

Now, i want to set this values to the checkboxes by their id So it will look like this :

<div class="checkbox">
    <label>
         <input type="checkbox"
           class="animals_input" value="0" id="dogs"
           name="animals_check[]">Dogs // should be checked
    </label>
</div>

I'm looking for something like this :

   $(".checkbox").val(id from db)
        .find(id == id from db).prop('checked', true);

Here is an example - plunker

Upvotes: 0

Views: 4710

Answers (3)

Geo George
Geo George

Reputation: 359

var obj = {
  "dogs": "1",
  "cats": "1",
  "ducks": "0"
};
var checkboxsection=[];
$.each(obj,function(key,val){
  var checkboxtemp=' <label> '+
        '<input type="checkbox" class="animals_input" value="'+val+'" id="'+key+'" name="animals_check[]">'+key+
                '</label>';
     checkboxsection.push(checkboxtemp);         
});

$(".checkbox").html(checkboxsection.join(""));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="checkbox">

</div>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

To achieve this you can loop through the keys of the object and set the checked state of the checkbox, like this:

var obj = {
  "dogs": "1",
  "cats": "1",
  "ducks": "0"
};

for (var key in obj) {
  $('#' + key).prop('checked', obj[key] == "1");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
  <label>
    <input type="checkbox" class="animals_input" value="0" id="dogs" name="animals_check[]">Dogs
  </label>
  <label>
    <input type="checkbox" class="animals_input" value="0" id="ducks" name="animals_check[]">Ducks
  </label>
  <label>
    <input type="checkbox" class="animals_input" value="0" id="cats" name="animals_check[]">Cats
  </label>
</div>

Also note that it would be much better practice to return a boolean value in the JSON instead of strings.

Upvotes: 1

Iceman
Iceman

Reputation: 6145

  1. Iterate through the keys in your json object
  2. search by id
  3. mark the box

Snippet (Vanilla Javascript Soln):

var result = {
  "dogs": "1",
  "cats": "1"
}

for (var key in result) {
  if (result[key] === "1") {
    document.getElementById(key).checked = true;
  }
}
<input type="checkbox" id="dogs">Dog<br>
<input type="checkbox" id="monkeys">Monkey<br>
<input type="checkbox" id="cats">Cat<br>

Upvotes: 1

Related Questions