如何將Json中的值設置爲複選框？

Question

我試圖從數據庫檢索基於Bootstrap模態和數據表的Crud菜單的輸入值。隨着文字輸入也沒有問題 - 我使用這個檢索：

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

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

但隨着的複選框，它更復雜 - 它們的值保存爲JSON - 這樣的：

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

所以，當我從DB retrive的複選框的值看起來像這樣（1爲選中）：

operation_target： 「{」 狗 「：」 1" ， 「貓」： 「1」}」

現在，我想將此值設置爲通過他們的ID複選框，因此，這將是這樣的：

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

我正在尋找這樣的事情：

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

下面是一個例子 - plunker

Answer 1

1. 迭代通過您的JSON對象鍵搜索通過ID
3. 紀念盒

片段（香草的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

要做到這一點，你可以循環通過對象的鍵並設置複選框的選中狀態，如下所示：

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>

另外請注意，這將是多更好的做法是在JSON而不是字符串返回一個布爾值。

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>