如何在Javascript中根据True或False更改复选框状态？

我正在实现一个基于JSON数据的表。Json数据也有复选框的“true”和“false”值。所以我想根据“真”或“假”值将复选框标记为选中或未选中

当我使用道具或is时，它会给出“道具未定义且未定义”

var数据={
“管理”：
{
“通知”：{
“红色”：{“删除”：真，“启用”：真，“查看”：真}，
“黄色”：{“删除”：真，“启用”：真，“查看”：真}，
“特殊颜色”：“复选框”
},
“黑色通知”：{“黑色”：“复选框”}
},
“教员”：
{
“薪资”：{“列表”：“复选框”}，
},
};
var zoneHtml=“”；
用于（数据中的var zoneKey）{
zoneHtml+=''；
zoneHtml+=（“”+zoneKey+“”）；
var jsonData=数据[zoneKey]；
for（jsonData中的var listUI）{
zoneHtml+=''；
zoneHtml+=（“”+listUI+“”）；
var-ports=jsonData[listUI]；
zoneHtml+='
'；
用于（端口中的var端口）{
if（端口类型[端口]=“对象”）{
zoneHtml+='
'+端口+'：'；
zoneHtml+='
'
用于（端口[端口]中的var i）{
zoneHtml+='
'+JSON.parse（端口[port][i]）+'
；
$（'#'+i+''）.is（'checked'，JSON.parse（port[port][i]）；
}
zoneHtml+='
'；
}否则{
zoneHtml+=（“
”+端口+”：“+端口[端口]+”
”）；
}
}
zoneHtml+='
'；
zoneHtml+=''；
}
zoneHtml+=（“”）；
}
$（“#zone”）.html（zoneHtml）
.jsonData{
左缘：5%；
}
锂
{ 
显示：内联；
}  
.checkBoxProp{
左缘：4%；
}

有一个属性（以及一个
不确定的
，如果您想显示只有一部分被选中，就像在复选框树中一样）


let check=document.getElementsByClassName（“checkme”）
Array.from（check）.forEach（cb=>cb.checked=true）
let Undeterminate=document.getElementsByCassName（“UndeterminateMe”）
Array.from（不确定）.forEach（cb=>cb.undeterminate=true）
您正在使用字符串连接创建元素，但在执行不正确的
$（'#'+i+''）操作时，元素尚未添加到DOM中

因此，根据解析的值添加
选中的
属性

 zoneHtml += '<li class="checkBoxProp"><input type="checkbox" id="' 
      + i + '" '
      + (JSON.parse(ports[port][i]) ? " checked " : "") //Add checked attribute based on parsed value
      +'>' + JSON.parse(ports[port][i]) + '</li>';


此行：

$('#'+i+'').is('checked', JSON.parse(ports[port][i]));

当复选框尚未添加到html中时，该复选框会显示得太快

它还应该是：

$('#'+i).prop('checked', true);
$('#'+i).prop('checked', false);


在这种情况下，当您通过字符串创建html时，您可以直接在字符串中添加
选中的
值：

 zoneHtml += '<li class="checkBoxProp"><input type="checkbox" id="'+i+'" '
           + (JSON.parse(ports[port][i]) ? " checked " : "")
           +'>' + JSON.parse(ports[port][i]) + '</li>';

zoneHtml+='
'+JSON.parse（ports[port][i]）+'
；

（假设
JSON.parse（ports[port][i]）
确实返回true/false）
我已经更新了你的fiddle@freedomn-m，我没有使用JQuery，因为我从未使用过它，也不知道在不查看文档数小时的情况下如何给出正确的解决方案：p。另一方面，我发现vanilla JS在这种情况下更有趣，因为它表明JQuery很有用，但vanilla也可以轻松地完成这些事情（因为ES6）