如何将Json中的值设置为复选框？

我试图从数据库检索基于Bootstrap模态和数据表的Crud菜单的输入值。随着文字输入也没有问题 - 我使用这个检索：如何将Json中的值设置为复选框？

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

来源

2017-04-20 RoyBarOn

迭代通过您的JSON对象键搜索通过ID
纪念盒

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

来源

2017-04-20 08:01:29 Iceman

冰人，罗里McCrossan，地理乔治 - 感谢您的快速反应 - 所有你的建议的工作 - 但是从一个页面传递到另一个时复选框数据不刷新....如果在一个页面中只有一个复选框被选中 - 当我编辑另一行时 - 数据仍然会出现.... – RoyBarOn

好的，如果你改变了HTML，那么你将需要重新运行功能 – Iceman

告诉我激动人心的是如何分页发生，ajax是客户端吗？ – Iceman

要做到这一点，你可以循环通过对象的键并设置复选框的选中状态，如下所示：

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而不是字符串返回一个布尔值。

来源

2017-04-20 07:59:09

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>

来源

2017-04-20 08:10:09

如何将Json中的值设置为复选框？

回答

相关问题