CheckBox not being checked using jquery and javascript

Question

I have a arrayList which is var totalCheckBoxArray=[1,2,3];

I have checkboxes which has value 1 and 2 and 3 :

  <div class="card-body">
   <h5>Document List</h5>
   <div class="form-check">
      <div class="form-group" id="documents">
         <label> <input id="check_id1" type="checkbox" value="1" class="chk1" > <span>Invoice</span>
         <br>
         </label>
         <div style="padding-bottom: 5px"></div>
         <label> <input id="check_id2" type="checkbox" value="2" class="chk2" > <span>Packing List</span>
         <br>
         </label>
         <label> <input id="check_id3" type="checkbox" value="3" class="chk3" checked=""> <span>OTHERS</span>
         <br>
         </label>
      </div>
   </div>
</div>

In another variable i have list coming and stored in

trDataSecondTable.docLetterPrevious=[  
   {  
      "letterNo":13,
      "docId":1,
      "docName":"Invoice",
      "docNameEng":"Invoice",
      "docFile":null,
      "entryBy":"user98",
      "entryDate":"2019-02-05 13:03:02",
      "seqNo":1,
      "othersDescription":null
   },
   {  
      "letterNo":13,
      "docId":2,
      "docName":"Packing List",
      "docNameEng":"Packing List",
      "docFile":null,
      "entryBy":"user98",
      "entryDate":"2019-02-05 13:03:02",
      "seqNo":1,
      "othersDescription":null
   },
   {  
      "letterNo":13,
      "docId":3,
      "docName":"OTHERS",
      "docNameEng":"OTHERS",
      "docFile":null,
      "entryBy":"user98",
      "entryDate":"2019-02-05 13:03:02",
      "seqNo":1,
      "othersDescription":"add"
   },
   {  
      "letterNo":13,
      "docId":3,
      "docName":"OTHERS",
      "docNameEng":"OTHERS",
      "docFile":null,
      "entryBy":"user98",
      "entryDate":"2019-02-05 13:03:02",
      "seqNo":2,
      "othersDescription":"adffff"
   }
]

i need to compare the values of totalCheckBoxArray to value of trDataSecondTable.docLetterPrevious.docId and need to make checked the checkbox ,if their value matches. For example: if totalCheckBoxArray with value 1 matches with any trDataSecondTable.docLetterPrevious.docId =1,then Invoice must be checked. So I tried like this but it is not being checked.

 if(trDataSecondTable.docLetterPrevious){ 
  for (var i = 0; i <trDataSecondTable.docLetterPrevious.length ; i++) {
   for(j=0;j<totalCheckBoxArray.length;j++){

        if (totalCheckBoxArray[j] == trDataSecondTable.docLetterPrevious[i].docId) {
            console.log("entered in check");
            $(".chk"+(i+1)).prop('checked',true);
        } 
        else {
            $(".chk"+(i+1)).prop('checked', false);
             }

    }       
    }

     } 

Answer 1

with document.querySelectorAll take all the input and insert their respective values in an array. Iterate over the data and compare if the id is present in that array. If it is present, mark the input with corresponding value as true

 var data=[ { "letterNo":13, "docId":1, "docName":"Invoice", "docNameEng":"Invoice", "docFile":null, "entryBy":"user98", "entryDate":"2019-02-05 13:03:02", "seqNo":1, "othersDescription":null }, { "letterNo":13, "docId":2, "docName":"Packing List", "docNameEng":"Packing List", "docFile":null, "entryBy":"user98", "entryDate":"2019-02-05 13:03:02", "seqNo":1, "othersDescription":null }, { "letterNo":13, "docId":3, "docName":"OTHERS", "docNameEng":"OTHERS", "docFile":null, "entryBy":"user98", "entryDate":"2019-02-05 13:03:02", "seqNo":1, "othersDescription":"add" }, { "letterNo":13, "docId":3, "docName":"OTHERS", "docNameEng":"OTHERS", "docFile":null, "entryBy":"user98", "entryDate":"2019-02-05 13:03:02", "seqNo":2, "othersDescription":"adffff" } ] var val=document.querySelectorAll('input[type=checkbox]'); var arr=[]; val.forEach((e)=>arr.push(Number(e.value))) data.forEach((e)=>{ if(arr.includes(e.docId)) { val.forEach((x)=>e.docId==x.value?x.checked=true:false) } })

 <div class="card-body"> <h5>Document List</h5> <div class="form-check"> <div class="form-group" id="documents"> <label> <input id="check_id1" type="checkbox" value="1" class="chk1" > <span>Invoice</span> <br> </label> <div style="padding-bottom: 5px"></div> <label> <input id="check_id2" type="checkbox" value="2" class="chk2" > <span>Packing List</span> <br> </label> <label> <input id="check_id3" type="checkbox" value="3" class="chk3" > <span>OTHERS</span> <br> </label> </div> </div> </div>

Answer 2

use this code

 var trDataSecondTable = {docLetterPrevious:[]}; $('input:checkbox').removeAttr('checked'); trDataSecondTable.docLetterPrevious=[ { "letterNo":13, "docId":1, "docName":"Invoice", "docNameEng":"Invoice", "docFile":null, "entryBy":"user98", "entryDate":"2019-02-05 13:03:02", "seqNo":1, "othersDescription":null }, { "letterNo":13, "docId":2, "docName":"Packing List", "docNameEng":"Packing List", "docFile":null, "entryBy":"user98", "entryDate":"2019-02-05 13:03:02", "seqNo":1, "othersDescription":null }, { "letterNo":13, "docId":2, "docName":"OTHERS", "docNameEng":"OTHERS", "docFile":null, "entryBy":"user98", "entryDate":"2019-02-05 13:03:02", "seqNo":1, "othersDescription":"add" }, { "letterNo":13, "docId":3, "docName":"OTHERS", "docNameEng":"OTHERS", "docFile":null, "entryBy":"user98", "entryDate":"2019-02-05 13:03:02", "seqNo":2, "othersDescription":"adffff" } ] var totalCheckBoxArray=[1,2,3]; if(trDataSecondTable.docLetterPrevious){ for (var i = 0; i <trDataSecondTable.docLetterPrevious.length ; i++) { for(j=0;j<totalCheckBoxArray.length;j++){ if (totalCheckBoxArray[j] == trDataSecondTable.docLetterPrevious[i].docId) { console.log("entered in check"); $(".chk"+(i+1)).attr('checked',true); } } } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card-body"> <h5>Document List</h5> <div class="form-check"> <div class="form-group" id="documents"> <label> <input id="check_id1" type="checkbox" value="1" class="chk1" > <span>Invoice</span> <br> </label> <div style="padding-bottom: 5px"></div> <label> <input id="check_id2" type="checkbox" value="2" class="chk2" > <span>Packing List</span> <br> </label> <label> <input id="check_id3" type="checkbox" value="3" class="chk3" checked=""> <span>OTHERS</span> <br> </label> </div> </div> </div>