How to change checkbox status based on True or False in Javascript?

Question

I am Implementing one table based on JSON Data. And Json data also has "true" "false" value for checkbox. So I want to marked checkbox as a checked or unchecked based on "true" or "false" value.

When I am using prop or is, Then It is giving "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/

I want to put that "true" or "false" value in the checkbox.

I've updated your fiddle http://jsfiddle.net/0n9fmawb/66/ – Ashraf Aug 30 '18 at 09:40 — Ashraf, Aug 30 '18 at 09:40

jonatjano · Answer 1 · 2018-08-30T09:40:34.943

0

input[type="checkbox"] have a checked(as well as an indeterminate if you want to show that only part of it is checked like in tree of checkbox) attribute for this

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

edited Aug 30 '18 at 09:40

answered Aug 30 '18 at 09:35

jonatjano

3,576
1
15
20

@freedomn-m I didn't use JQuery because I never used it and don't know enougth to give a proper solution without looking in the doc for hours :p. On the other hand I find vanilla JS more interesting in case like these as it show JQuery is useful but vanilla can also do these thing as easily (since ES6) – jonatjano Aug 30 '18 at 09:43

score 0 · Answer 2 · answered Aug 30 '18 at 09:38

This line:

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

appears too soon as the checkbox has not yet been added to the html.

It should also be:

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

Setting "checked" for a checkbox with jQuery?

In this case, as you are creating the html via a string, you can add the checked value directly in the string:

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

(assuming JSON.parse(ports[port][i]) does return true/false)

Satpal · Accepted Answer · 2018-08-30T09:43:37.780

You are creating element using string concatenation elements are yet not added to DOM when you perform the incorrect $('#'+i+'').is operation.

So add checked attribute based on parsed value.

 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>

To set value using jQuery use .prop('checked', true/false) instead of .is('checked')

How to change checkbox status based on True or False in Javascript?

3 Answers3