没有使用jQuery和JavaScript检查CheckBox

时间：2019-02-07 05:20:52

标签： javascript jquery html

我有一个var totalCheckBoxArray=[1,2,3];的arrayList

我有一个复选框，其值分别为1、2和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>

在另一个变量中，我有一个列表要存储在

中 
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"
   }
]

我需要将totalCheckBoxArray的值与trDataSecondTable.docLetterPrevious.docId的值进行比较，如果它们的值匹配，则需要选中此复选框。例如：如果值为1的totalCheckBoxArray与任何trDataSecondTable.docLetterPrevious.docId = 1匹配，则必须检查Invoice。因此，我尝试过这种方法，但尚未对其进行检查。

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

    }       
    }

     }

2 个答案:

答案 0 :(得分：2)

with document.querySelectorAll接受所有输入并将它们各自的值插入数组中。遍历数据并比较ID是否存在于该数组中。如果存在，则将具有相应值的输入标记为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>

答案 1 :(得分：1)

使用此代码

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>

相关问题
最新问题