Пожалуйста, посмотрите на это изображение
он работает только для одного флажка, но я хочу работать для каждого флажка, потому что идентификатор такой же, как 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();">×</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>
<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"/>
у всех ваших inputs
одинаковые id
? - id = "checkCheckbox"
да, все идентификаторы одинаковы
Идентификатор поля номера также такой же
Это не правильно. Атрибут id
должен быть уникальным для каждого элемента.
для поля флажка любой идентификатор одинаков
Каждое поле флажка должно иметь уникальный id
. Вы можете вставить сюда еще немного html-кода, чтобы я мог сделать для вас пример и исправить идентификаторы.
Вы можете вставить свой код, отредактировав свой вопрос.
хорошо, я вставляю
пожалуйста, смотрите код выше.. я редактировал
В 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();">×</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
не могли бы вы сделать это в функции onclick ()?
Привет. Но работает хорошо для меня. Вам нужно сделать код html
, как в моем примере. И не используйте один и тот же id
для всех. Что вы имеете в виду под функцией onclick()
?
Дайте html код. Я приведу вам пример с использованием метода
forEach()
.