Wie setze ich Werte von Json zu Checkboxen?

Question

Ich versuche, Eingabewerte aus der Datenbank in Crud-Menüs abzurufen, die auf Bootstrap-Modalen und Datatables basieren. Mit der Texteingabe war es kein Problem - ich verwendet, um dieses abzurufen:

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

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

Aber mit den Kontrollkästchen ist es komplizierter - ihre Werte werden als json gespeichert - wie folgt aus:

 {% 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 %} 

Also, wenn i retrive von DB sieht das Kontrollkästchen der Werte wie folgt aus (1 für aufgegebenes)

operation_target: "{" Hunde ":" 1" , "Katzen": "1"}“

Jetzt möchte ich setze diese Werte auf die So Kontrollkästchen durch ihre ID wird es wie folgt aussehen:

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

Ich bin auf der Suche nach so etwas wie folgt aus:

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

Hier ist ein Beispiel - plunker

Answer 1

1. Iterate über die Tasten im JSON-Objekt
2. Suche nach ID
3. Markieren Sie das Feld

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>

Answer 2

Um dies zu erreichen Sie können Schleife durch die Tasten des Objekts und setzen Sie den aktivierten Zustand des Kontrollkästchens, wie folgt:

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>

Beachten Sie auch, dass es viel bessere Praxis wäre, einen boolean Wert im JSON statt Strings zurückzukehren.

Answer 3

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>