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

by

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”

  2. 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

  3. 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