Блог

Главная - Вопросы по программированию - Есть ли что-нибудь, чего мне не хватает?

Есть ли что-нибудь, чего мне не хватает?

#javascript

#javascript

Вопрос:

Я создал флажок и применил эти атрибуты

 let box = document.createElement('input');
box.setAttribute("type","checkbox");
box.setAttribute("id","box");
box.setAttribute("onclick","checkBox(this)");

Это функция

 function checkBox(para2){
    let condition = box.checked;
    if (condition === true) {
        para2.parentNode.style.opacity = '0.5'
        para2.parentNode.style.textDecoration = "line-through"

    }
    if (condition === false) {
        para2.parentNode.style.opacity = "1";
        para2.parentNode.style.textDecoration = "none";
    }
}

Когда я нажимаю на первый флажок, стиль работает. Но когда я нажимаю на других дочерних элементов, это не работает.

Комментарии:

1. Что именно не работает?

2. стиль не действует на других детей

3. Можете ли вы предоставить код с дочерними элементами?

4. Это мой HTML-код <идентификатор div=»контейнер»> <идентификатор ul=»список»> </ul> </div>

5. Не могли бы вы, пожалуйста, поместить код в свой вопрос, чтобы он был немного более понятным?

Ответ №1:

В вашей функции флажка,

  let condition = box.checked;

В этой строке специально проверяется, установлен ли флажок «box». Поскольку у вас установлено несколько флажков, я полагаю, что у вас могут быть box2, box3 и т.д.

В качестве решения вы можете ввести атрибут «name» в свои флажки и использовать селектор запросов, чтобы определить, какие из них отмечены.

  let condition = document.querySelectorAll('input[name="color"]');
    condition.forEach((cb) => {
        if (cb.checked === true) {
          // your code
        } else {
          // your code
        }
        
    });

Примечание: может быть много других возможных способов сделать это. Это то, что пришло мне в голову прямо сейчас