При проверке значение флажка увеличивается или уменьшается, но оно работает только для одного флажка, должно работать для каждого флажка (обычный Javascripr)

Пожалуйста, посмотрите на это изображение

он работает только для одного флажка, но я хочу работать для каждого флажка, потому что идентификатор такой же, как 1-й флажок

Вот мой код:

function addRightAnswer(){
var getRadioOptionsNumberCheck = document.getElementById('checkCheckbox');

if (document.getElementById('checkCheckbox').checked)
  {
    document.getElementById('get-radio-input-number').value=1;
  } 
  else
  {
    document.getElementById('get-radio-input-number').value=0;
  } 
}
<div class = "modal-content"><span class = "close" onclick = "closeModal();">&times;</span>
    <div class = "model-layout">
        <p>Enter question</p>
        <form onsubmit = "return false;" autocomplete = "off">
            <div class = "form-group"><input type = "text" id = "radio-input" class = "form-control" placeholder = "Question"
                    required autofocus></div>
            <p>Enter Your Option and Points</p>
            <div class = "form-group" id = "divFectchAllQuestion">
                <div><input type = "checkbox" class = "input-checkbox" id = "checkCheckbox" name = "checkCheckbox"
                        onclick = "addRightAnswer(this);"><input type = "text" placeholder = "Enter your option"
                        class = "form-control-range-number1" id = "get-radio-input1" name = "get-radio-input" value = ""><input
                        type = "number" id = "get-radio-input-number" value = "0" name = "get-radio-input" /><button
                        type = "click" onclick = "addMoreOptions(this)"><i class = "fa fa-plus-circle"
                            aria-hidden = "true"></i></button><button type = "button" disabled><i class = "fa fa-minus-circle"
                            aria-hidden = "true"></i></button></div>
                <div><input type = "checkbox" class = "input-checkbox" id = "checkCheckbox" name = "checkCheckbox"
                        onclick = "addRightAnswer(this);"><input type = "text" placeholder = "Enter your option"
                        class = "form-control-range-number" id = "get-radio-input" name = "get-radio-input"><input
                        type = "number" id = "get-radio-input-number" value = "0" name = "get-radio-input" /><button
                        type = "click" onclick = "addMoreOptions(this)"><i class = "fa fa-plus-circle"
                            aria-hidden = "true"></i></button><button type = "click" onclick = "removeOptions(this)"><i
                            class = "fa fa-minus-circle" aria-hidden = "true"></i></button></div>
                <div><input type = "checkbox" class = "input-checkbox" id = "checkCheckbox" name = "checkCheckbox"
                        onclick = "addRightAnswer(this);"><input type = "text" placeholder = "Enter your option"
                        class = "form-control-range-number1" id = "get-radio-input3" name = "get-radio-input"><input
                        type = "number" id = "get-radio-input-number" value = "0" name = "get-radio-input" /><button
                        type = "click" onclick = "addMoreOptions(this)"><i class = "fa fa-plus-circle"
                            aria-hidden = "true"></i></button><button type = "click" onclick = "removeOptions(this)"><i
                            class = "fa fa-minus-circle" aria-hidden = "true"></i></button></div>
                <div><input type = "checkbox" class = "input-checkbox" id = "checkCheckbox" name = "checkCheckbox"
                        onclick = "addRightAnswer(this);"><input type = "text" placeholder = "Enter your option"
                        class = "form-control-range-number1" id = "get-radio-input4" name = "get-radio-input"><input
                        type = "number" id = "get-radio-input-number" value = "0" name = "get-radio-input" /><button
                        type = "click" onclick = "addMoreOptions(this)"><i class = "fa fa-plus-circle"
                            aria-hidden = "true"></i></button><button type = "click" onclick = "removeOptions(this)"><i
                            class = "fa fa-minus-circle" aria-hidden = "true"></i></button></div>
            </div><label for = "radio-group-required"><input type = "checkbox" class = "input-checkbox"
                    id = "radio-group-required">Make this question compulsory</label>
            <div class = "select-page form-group">
                <p>Select Page</p><select id = "line-page-no" name = "line-page-no"
                    class = "page-options form-control"></select>
            </div>
            <div class = "form-group"><input type = "submit" class = "submit-button" value = "Submit"
                    onclick = "addRadioGroup();"></div>
        </form>
        <p id = "radio-error-message"></p>
    </div>
</div>

Дайте html код. Я приведу вам пример с использованием метода forEach().

s.kuznetsov 25.12.2020 06:57

<input type = "checkbox" class = "input-checkbox" id = "checkCheckbox" name = "checkCheckbox" onclick = "addRightAnswer(this);"> Это числовое поле <input type = "number" id = "get -radio-input-number" value = "0" name = "get-radio-input"/>

preeti raj 25.12.2020 06:58

у всех ваших inputs одинаковые id? - id = "checkCheckbox"

s.kuznetsov 25.12.2020 07:01

да, все идентификаторы одинаковы

preeti raj 25.12.2020 07:02

Идентификатор поля номера также такой же

preeti raj 25.12.2020 07:02

Это не правильно. Атрибут id должен быть уникальным для каждого элемента.

s.kuznetsov 25.12.2020 07:03

для поля флажка любой идентификатор одинаков

preeti raj 25.12.2020 07:04

Каждое поле флажка должно иметь уникальный id. Вы можете вставить сюда еще немного html-кода, чтобы я мог сделать для вас пример и исправить идентификаторы.

s.kuznetsov 25.12.2020 07:06

Вы можете вставить свой код, отредактировав свой вопрос.

s.kuznetsov 25.12.2020 07:07

хорошо, я вставляю

preeti raj 25.12.2020 07:08

пожалуйста, смотрите код выше.. я редактировал

preeti raj 25.12.2020 07:13
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
11
59
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В html вы используете один и тот же id для всех входных данных — это недействительно для html! Каждый предмет должен иметь уникальный id. Я удалил все идентификаторы из вашего ввода, используя класс для реверсирования в коде js.

Кроме того, у ваших вторых входов с номером тоже был такой же id. Это тоже ошибка. Я заменил на класс. Так:

class = "get-radio-input-number"

Теперь по коду js... Я написал логику отображения значения на входе, используя метод forEach(), который идентифицирует входы по параметру [index].

window.onload = function() {
let getRadioOptionsNumberCheck = document.querySelectorAll('.input-checkbox');
let getRadioInputNumber = document.querySelectorAll('.get-radio-input-number');

  getRadioOptionsNumberCheck.forEach(function(current, index) {
    current.addEventListener('click', function() {

      if (current.checked) {
        getRadioInputNumber[index].value = 1;
      } 
      else
      {
        getRadioInputNumber[index].value = 0;
      }  

    });
  });
}
<div class = "modal-content"><span class = "close" onclick = "closeModal();">&times;</span>
    <div class = "model-layout">
        <p>Enter question</p>
        <form onsubmit = "return false;" autocomplete = "off">
            <div class = "form-group"><input type = "text" id = "radio-input" class = "form-control" placeholder = "Question"
                    required autofocus></div>
            <p>Enter Your Option and Points</p>
            <div class = "form-group" id = "divFectchAllQuestion">
                <div><input type = "checkbox" class = "input-checkbox" name = "checkCheckbox"><input type = "text"
                        placeholder = "Enter your option" class = "form-control-range-number1" id = "get-radio-input1"
                        name = "get-radio-input" value = ""><input type = "number" class = "get-radio-input-number" value = "0"
                        name = "get-radio-input" /><button type = "click" onclick = "addMoreOptions(this)"><i
                            class = "fa fa-plus-circle" aria-hidden = "true"></i></button><button type = "button" disabled><i
                            class = "fa fa-minus-circle" aria-hidden = "true"></i></button></div>
                <div><input type = "checkbox" class = "input-checkbox" name = "checkCheckbox"><input type = "text"
                        placeholder = "Enter your option" class = "form-control-range-number" id = "get-radio-input"
                        name = "get-radio-input"><input type = "number" class = "get-radio-input-number" value = "0"
                        name = "get-radio-input" /><button type = "click" onclick = "addMoreOptions(this)"><i
                            class = "fa fa-plus-circle" aria-hidden = "true"></i></button><button type = "click"
                        onclick = "removeOptions(this)"><i class = "fa fa-minus-circle" aria-hidden = "true"></i></button>
                </div>
                <div><input type = "checkbox" class = "input-checkbox" name = "checkCheckbox"><input type = "text"
                        placeholder = "Enter your option" class = "form-control-range-number1" id = "get-radio-input3"
                        name = "get-radio-input"><input type = "number" class = "get-radio-input-number" value = "0"
                        name = "get-radio-input" /><button type = "click" onclick = "addMoreOptions(this)"><i
                            class = "fa fa-plus-circle" aria-hidden = "true"></i></button><button type = "click"
                        onclick = "removeOptions(this)"><i class = "fa fa-minus-circle" aria-hidden = "true"></i></button>
                </div>
                <div><input type = "checkbox" class = "input-checkbox" name = "checkCheckbox"><input type = "text"
                        placeholder = "Enter your option" class = "form-control-range-number1" id = "get-radio-input4"
                        name = "get-radio-input"><input type = "number" class = "get-radio-input-number" value = "0"
                        name = "get-radio-input" /><button type = "click" onclick = "addMoreOptions(this)"><i
                            class = "fa fa-plus-circle" aria-hidden = "true"></i></button><button type = "click"
                        onclick = "removeOptions(this)"><i class = "fa fa-minus-circle" aria-hidden = "true"></i></button>
                </div>
            </div><label for = "radio-group-required"><input type = "checkbox" class = "input-checkbox"
                    id = "radio-group-required">Make this question compulsory</label>
            <div class = "select-page form-group">
                <p>Select Page</p><select id = "line-page-no" name = "line-page-no"
                    class = "page-options form-control"></select>
            </div>
            <div class = "form-group"><input type = "submit" class = "submit-button" value = "Submit"
                    onclick = "addRadioGroup();"></div>
        </form>
        <p id = "radio-error-message"></p>
    </div>
</div>

еще одна ошибка 1-й щелчок по флажку показывает «0» как есть, после другого щелчка показывает 1

preeti raj 25.12.2020 19:56

не могли бы вы сделать это в функции onclick ()?

preeti raj 25.12.2020 19:57

Привет. Но работает хорошо для меня. Вам нужно сделать код html, как в моем примере. И не используйте один и тот же id для всех. Что вы имеете в виду под функцией onclick()?

s.kuznetsov 26.12.2020 07:38

Другие вопросы по теме