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

Question

我正在基于JSON数据实现一个表。而且，Json数据的复选框也具有“ true”“ false”值。因此，我想根据“ true”或“ false”值将复选框标记为选中或未选中。

当我使用prop或is时，然后它会给出“ prop是undefined并且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/

我想在复选框中输入“ true”或“ false”值。

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])确实返回true / false）