Как поменять checkbox при click

Question

Пишу приложение заметок. Есть функция она должна менять checkbox на нажатый ,когда человек нажимает на textarea , но когда я создаю несколько заметок , и когда нажимаю textarea , то checkbox меняется у всех созданных заметок на нажатый. Помогите пожалуйста.

let containerNote = document.querySelector('.note-container')

document.querySelector('.btn-addNote').addEventListener('click', function() {
  let displayNote = `
        <div class="card w-100 mt-5">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div class="note-date">
                    Time
                </div>

                <div class="checkers">
                    <input type="radio" aria-label="Radio button for following text input" class="input-focus mr-3">
                    <button type="button" class="btn btn-danger btn-del">Delete button</button>
                </div>
            </div>
            <div class="card-body">
                <textarea name="" id="" cols="30" rows="10" class="w-100" style="border: 0"></textarea>
            </div>
        </div>
    `
  containerNote.innerHTML += displayNote

  delNote()
  focusToNote()
})

function delNote() {
  let btnDels = document.querySelectorAll('.btn-del')

  for (let btnItem of btnDels) {
    btnItem.addEventListener('click', function() {
      containerNote.removeChild(document.querySelector('.card'))
    })
  }
}

function focusToNote() {
  let textAreas = document.querySelectorAll('textarea')
  let checkBoxsFocus = document.querySelectorAll('.input-focus')

  for (let textArea of textAreas) {
    textArea.addEventListener('focus', function() {
      for (let checkBoxFocus of checkBoxsFocus) {
        checkBoxFocus.checked = true
      }
    })
  }
}

function getTime() {

}

<button class="btn-addNote">+</button>

<div class="note-container"></div>

Answer 1

Ожидалось что-то такое ?

const containerNote = document.querySelector('.note-container')

document.querySelector('.btn-addNote').addEventListener('click', function() {
  let displayNote = `
        <div class="card w-100 mt-5">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div class="note-date">
                    Time
                </div>

                <div class="checkers">
                    <input type="radio" aria-label="Radio button for following text input" class="input-focus mr-3">
                    <button type="button" class="btn btn-danger btn-del" onclick="delNote(this)">Delete button</button>
                </div>
            </div>
            <div class="card-body">
                <textarea name="" id="" cols="30" rows="10" class="w-100" style="border: 0" onfocus="addFocusToNote(this)" onblur="removeFocusToNote(this)"></textarea>
            </div>
        </div>
    `
  containerNote.innerHTML += displayNote
})

function delNote(that) {
  that.closest('div.card').remove()
}

function addFocusToNote(that) {
  that.closest('div.card').querySelector('.input-focus').checked = true
}

function removeFocusToNote(that) {
  that.closest('div.card').querySelector('.input-focus').checked = false
}

<button class="btn-addNote">+</button>

<div class="note-container"></div>

БЛОГ НА HUSL

Как поменять checkbox при click

Ответы (1 шт):