Check a list of checkboxes if input value matches one of the values in different array

I have an array of objects (array1) that I am looping through and rendering in a form as a series of inputs where type="checkbox". I am setting the input value to the object.id, and the input name to the object.name.

I then have a second array (array2), which is just an array of values. I need to compare array1 to array2, and if the value for that given input matches one of the values in array2, then set checked="true." If not, then do not check. It’s basically auto-checking any inputs that already have a value that exists in array2.

let array1 = [
{id: 28, name: "Action"}, 
{id: 35, name: "Comedy"},
{id: 80, name: "Crime"},
{id: 99, name: "Documentary"}
{id: 18, name: "Drama"}
{id: 10751, name: "Family"}
]

let array2 = [1, 65, 28, 12, 18]

Here’s what I have for my loop:

for(let i in array2) {
   for(let j in array1) {
      if(array2[i] == array1[j].id) {
          return (
          <div>
             <label>name here</label>
             <input type="checkbox" id={array1[j].id} value={array1[j].id} name={array1[j].name} checked='true'/>
          </div>
          )
    }
      if(array2[i] != array1[j].id) {
           return (
           <div>
               <label>name here</label>
               <input type="checkbox" id={array1[j].id} value={array1[j].id} name={array1[j].name}/>
           </div>
          )
   }

Obviously this isn’t working and sorry if my current code seems stupid. I’ve been at this for a while and I’m at a complete loss on how to make this work.

4 thoughts on “Check a list of checkboxes if input value matches one of the values in different array”

  1. You can map array1 to the checkbox inputs and do a simple check that array2 includes the id property from elements in array1.

    {array1.map(({ id, name }) => (
      <label key={id}>
        {name}
        <input
          type="checkbox"
          value={id}
          name={name}
          defaultChecked={array2.includes(id)}
        />
      </label>
    ))}
    

    Edit check-a-list-of-checkboxes-if-input-value-matches-one-of-the-values-in-different

    Reply
  2. A quite verbose answer if you’re using vanilla JS.

    https://jsfiddle.net/rodolforecordon/nbywuxh7/23/

    let array1 = [
    {id: 28, name: "Action"}, 
    {id: 35, name: "Comedy"},
    {id: 80, name: "Crime"},
    {id: 99, name: "Documentary"},
    {id: 18, name: "Drama"},
    {id: 10751, name: "Family"}
    ]
    
    let array2 = [1, 65, 28, 12, 18]
    
    for(let i in array2) {
       for(let j in array1) {
          if(array2[i] == array1[j].id) {
            var checkbox = document.createElement("INPUT")
            checkbox.setAttribute("type","checkbox")
            checkbox.setAttribute("id",`${array1[j].id}`)
            checkbox.setAttribute("value",`${array1[j].id}`)
            checkbox.setAttribute("value",`${array1[j].id}`)
            checkbox.setAttribute("name",`${array1[j].name}`)
            checkbox.setAttribute("checked", "true")
            document.body.appendChild(checkbox)
            
            var label = document.createElement("LABEL")
            label.innerText = `${array1[j].name}`
            document.body.appendChild(label)
            
            document.body.appendChild(document.createElement("br"))
            }
          if(array2[i] != array1[j].id) {
            var checkbox = document.createElement("INPUT")
            checkbox.setAttribute("type","checkbox")
            checkbox.setAttribute("id",`${array1[j].id}`)
            checkbox.setAttribute("value",`${array1[j].id}`)
            checkbox.setAttribute("value",`${array1[j].id}`)
            checkbox.setAttribute("name",`${array1[j].name}`)
            document.body.appendChild(checkbox)
            
            var label = document.createElement("LABEL")
            label.innerText = `${array1[j].name}`
            document.body.appendChild(label)
            
            document.body.appendChild(document.createElement("br"))
                }
       }
    }
    
    Reply

Leave a Comment