Javascript проверяет переключатель в форме на основе значения текстового поля

У меня есть форма, которая вставляет и извлекает данные из таблицы Google.

Пример:

В моей форме есть два переключателя

<input id = "Rdio_1" name = "RdioSelect" type = "radio" class = "FirstCheck" 
    value = "1" onchange = "RadioValInsert ()"/>

<input id = "Rdio_2" name = "RdioSelect"  type = "radio" class = "FirstCheck" 
    value = "2" onchange = "RadioValInsert ()" />

при нажатии на указанное выше значение переключателя сохраняется в текстовом поле ... RadioValInsert () делает это

<input type = "text" id = "DatafromRadio" name = "DatafromRadio">

Я могу вставить это значение 1 или 2 в соответствующую ячейку в листе Google.

Когда я хочу отредактировать его, я извлекаю данные, а значение текстового поля равно 1 или 2.

Кнопка, которая извлекает данные, имеет функцию проверки соответствующего переключателя на основе значения текстового поля.

function RadioChk() {
  var val = document.getElementById("DatafromRadio").value;
  if (val == 1) {
    document.getElementById("Rdio_1").checked = true;
  }
  if (val == 2) {
    document.getElementById("Rdio_2").checked = true;
  }
}

Это не работает

Заранее спасибо за помощь

Разместите также свой HTML

Ankit Agarwal 26.10.2018 08:53

Пожалуйста, предоставьте свой код в JsFiddle, чтобы решить проблему и получить дополнительные объяснения.

shivani 26.10.2018 09:00

@shivani jsfiddles может быть хорошим дополнением, но, поскольку SO также имеет инструмент фрагмента кода, его следует предпочесть инструменту внешнего фрагмента

t.niese 26.10.2018 09:33
Поведение ключевого слова "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
3
229
2

Ответы 2

Вы выполняете свой код, связанный с check и uncheck, внутри функции RadioChk, однако вы не связали click event на радиовходах. Если я правильно понял ваш вопрос, вот как вы можете выбрать и отменить выбор переключателей.

function RadioValInsert() {
console.info('checked');
  var val =  document.getElementById("DatafromRadio").value;
  if (val ==1 || val ==2){
     uncheckAll();
     document.getElementById("Rdio_"+val).checked = true; 
  }else{
     uncheckAll();
     console.info('choose only between 1 or 2');
  }
  
}

function uncheckAll(){
let ele = document.getElementsByName("RdioSelect");
    for(var i=0;i<ele.length;i++){
      ele[i].checked = false;
    }
}
<input id = "Rdio_1" name = "RdioSelect" type = "radio" class = "FirstCheck" 
    value = "1" onchange = "RadioValInsert ()"/>

    <input id = "Rdio_2" name = "RdioSelect"  type = "radio" class = "FirstCheck" 
    value = "2" onchange = "RadioValInsert ()" />
    
    <input type = "text" id = "DatafromRadio" name = "DatafromRadio">

Привет, спасибо за это - я могу это сделать и получить значение - то, что я хочу, это обратное - текстовое поле заполняется либо 1, либо 2

JS Learner 26.10.2018 09:45

текстовое поле заполняется либо 1, либо 2, когда данные извлекаются из листа Google ... Теперь мне нужно проверить Rdio_1, если значение текстового поля равно 1 или проверить Rdio_2, если значение текстового поля равно 2 ... для этого у меня есть функция RadioCheck (), указанная в исходном сообщении, которая запускается при нажатии кнопки для получения данных ... Примечание. Это статическая HTML-форма.

JS Learner 26.10.2018 09:49

Попробуйте этот пример, где выбор радио и значение текстового поля изменяется в соответствии с выбором / вводом

document.addEventListener('DOMContentLoaded', function(dce) {
  var radios = document.querySelectorAll('[name = "RdioSelect"]');
  var textbx = document.querySelector('[name = "DatafromRadio"]');

  radios.forEach(function(r) {
    r.addEventListener('click', function(e) {
      textbx.value = this.value;
    });
  });

  textbx.addEventListener('input', function(e) {
    radios.forEach(function(r) {
      r.checked = (r.value === textbx.value);
    });
  });

  var fillTxt = function(txt) {
    textbx.value = txt;
    textbx.dispatchEvent(new Event('input')); //<-- trigger event
  };

  fillTxt('2'); //<--- update text box
});
<input id = "Rdio_1" name = "RdioSelect" type = "radio" value = "1" />
<input id = "Rdio_2" name = "RdioSelect" type = "radio" value = "2" />
<input type = "text" id = "DatafromRadio" name = "DatafromRadio" />

this works only if data is input physically in the text box - in my case the data is retrieved via a function and it populates the text box

В этом случае просто активируйте событие в текстовом поле

Hi-Tx для этого - это работает только в том случае, если данные вводятся физически в текстовое поле - в моем случае данные извлекаются через функцию и заполняют текстовое поле - я думаю, мне нужно запустить функцию после обновления текстовое поле - поскольку кажется, что функция проверки переключателя выполняется до заполнения текстового поля .... не знаю, как это сделать

JS Learner 26.10.2018 10:37

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