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

Question

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

当我使用 prop 或 is 时，它给出“prop is undefined and is undefined”。

var data = {
"managment":
    {
            "Notice":{
            "Red color" :{"delete":true,"enable":true,"view":true} ,
            "Yellow color":{"delete":true,"enable":true,"view":true},
            "Specail color":" checkoxes"
            },
            "Black Notice":{"black":" Checkboxes"}
    },
"Faculty":
    {
        "salary":{"list":" checkboxes"},
       
    },
};

var zoneHtml = '';


      for (var zoneKey in data) {
        zoneHtml += '<div class="zone">';
        zoneHtml += ('<h1>' + zoneKey + '</h1>');
        var jsonData = data[zoneKey];
        for (var listUI in jsonData) {
          zoneHtml += '<div class="jsonData">';
          zoneHtml += ('<h2>' + listUI + '</h2>');
          var ports = jsonData[listUI];
          zoneHtml += '<ul class="port">';
          for (var port in ports) {
            if (typeof ports[port] === 'object') {
              zoneHtml += '<li>' + port + ':';
              zoneHtml += '<ul>'
              for (var i in ports[port]) {
                zoneHtml += '<li class="checkBoxProp"><input type="checkbox" id="'+i+'">'  + JSON.parse(ports[port][i]) + '</li>';
                $('#'+i+'').is('checked', JSON.parse(ports[port][i]));
               
              }
              zoneHtml += '</ul></li>';
            } else {
              zoneHtml += ('<li>' + port + ':' + ports[port] + '</li>');
            }

          }
          zoneHtml += '</ul>';
          zoneHtml += '</div>';
        }
        zoneHtml += ('</div>');
      }


      $("#zone").html(zoneHtml);

  .jsonData{
    margin-left:5%;
  }
  li
{ 
display:inline; 
}  
.checkBoxProp{
  margin-left:4%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="zone"></div>

http://jsfiddle.net/varunPes/0n9fmawb/44/

我想在复选框中输入“真”或“假”值。

Answer 1

这一行:

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

由于尚未将复选框添加到 html，所以出现得太早。

也应该是:

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

Setting "checked" for a checkbox with jQuery?

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

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

(假设 JSON.parse(ports[port][i]) 确实返回 true/false)