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中检索时，复选框的值看起来像这样（1用于检查）：

operation_target：＆＃34; {＆＃34;狗＆＃34;：＆＃34; 1＆＃34;，＆＃34;猫＆＃34;：＆＃34; 1＆＃34;}＆＃34;

现在，我想通过他们的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

遍历json对象中的键
按ID搜索
标记框

Snippet（ Vanilla Javascript Soln ）：

＆＃13;

var result = {
  "dogs": "1",
  "cats": "1"
}

for (var key in result) {
  if (result[key] === "1") {
    document.getElementById(key).checked = true;
  }
}

＆＃13;

<input type="checkbox" id="dogs">Dog<br>
<input type="checkbox" id="monkeys">Monkey<br>
<input type="checkbox" id="cats">Cat<br>

＆＃13;

Answer 2

要实现此目的，您可以遍历对象的键并设置复选框的选中状态，如下所示：

＆＃13;

<iframe style="display:none" onload="StartUp()" id="TheBody" src="js/exercise2_1.js"></iframe>

＆＃13;

var obj = {
  "dogs": "1",
  "cats": "1",
  "ducks": "0"
};

for (var key in obj) {
  $('#' + key).prop('checked', obj[key] == "1");
}

＆＃13;

另请注意，在JSON中返回布尔值而不是字符串，这将是很多更好的做法。

Answer 3

＆＃13;

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(""));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="checkbox">

</div>

＆＃13;

如何设置从Json到复选框的值？

3 个答案: