如何在 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

input[type="checkbox"] 有一个 checked（以及一个 indeterminate，如果你想显示它的一部分像复选框树一样被选中）属性

let check = document.getElementsByClassName("checkme")
Array.from(check).forEach(cb => cb.checked = true)

let indeterminate = document.getElementsByClassName("indeterminateme")
Array.from(indeterminate).forEach(cb => cb.indeterminate = true)

<input type="checkbox">
<input class="checkme" type="checkbox">
<input class="indeterminateme" type="checkbox">

Answer 2

您正在使用字符串连接创建元素，当您执行不正确的$('#'+i+'').is 操作时，元素尚未添加到 DOM。

所以根据解析值添加checked属性。

 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>';

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]) ? " checked " : "")+'      >' + JSON.parse(ports[port][i]) + '</li>';

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

---

要使用 jQuery 设置值，请使用 .prop('checked', true/false) 而不是 .is('checked')

Answer 3

这一行：

$('#'+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]) 确实返回真/假）