Javascript-форум - Сравнение значений текстового поля input text со значениями radio

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Сравнение значений текстового поля input text со значениями radio (https://javascript.ru/forum/dom-window/55546-sravnenie-znachenijj-tekstovogo-polya-input-text-so-znacheniyami-radio.html)

Алекс_

03.05.2015 21:42

Сравнение значений текстового поля input text со значениями radio

Прошу помочь:) сам новичок в языке java script, буду благодарен
есть текстовое поле:

<input type="text" value="first" id="" name ="but_1" />

так же есть 5 radio:

<input type="Radio" name="v1" value="year">
    <input type="Radio" name="v1" value="apple">
    <input type="Radio" name="v1" value="first">
    <input type="Radio" name="v1" value="wer">
    <input type="Radio" name="v1" value="treck">

необходимо сделать проверку на совпадение значения текстового поля со всеми radio, и включить значение true у того radio, у которого значение совпало со значением текст. поля.
заранее спасибо:)

рони	03.05.2015 22:00

Алекс_,
почему R большое?

Алекс_

03.05.2015 22:16

Цитата:

Сообщение от рони (Сообщение 369328)

Алекс_,
почему R большое?

рони, суть вопроса совсем в другом, разницы нет, большая буква R или маленькая, и так и так работает.

Decode

03.05.2015 22:45

Алекс_, так?

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <input type="text" value="first" id="but_1" />
  <button>Проверить</button>
  <input type="radio" name="v1" value="year" />
  <input type="radio" name="v1" value="apple" />
  <input type="radio" name="v1" value="first" />
  <input type="radio" name="v1" value="wer" />
  <input type="radio" name="v1" value="treck" />

  <script>
    var button = document.getElementsByTagName('button')[0],
        inpElems = document.getElementsByName('v1'),
        inpTxt = document.getElementById('but_1');

    button.addEventListener('click', function() {
      Array.prototype.forEach.call(inpElems,function(item) {
        if(item.value == inpTxt.value) {
          item.checked = true;
        }
      });
    });
  </script>
</body>
</html>

рони	03.05.2015 22:56

Decode,
а если значение id="but_1" изменить ? тогда ваш код выдаст неверное значение при следующей проверке

Алекс_

03.05.2015 23:28

Decode,
не совсем) но спасибо большое, что решил помочь)
вот рабочий код, уже помогли)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Тест</title>
</head>
<script>
window.addEventListener("load",function(){
    document.querySelectorAll("input[value='"+document.getElementById("bb").value+"']")[1].setAttribute("checked","checked");
    });
</script>
<body>
    <input type="text" value="first" id="bb" name ="but_1" />
    <input type="Radio" name="v1" value="year">
    <input type="Radio" name="v1" value="apple">
    <input type="Radio" name="v1" value="first">
    <input type="Radio" name="v1" value="wer">
    <input type="Radio" name="v1" value="treck">
    <output id="result"></output>
</body>
</html>

Алекс_

03.05.2015 23:30

рони, не совсем тебя понимаю. Вопрос закрыт.

рони	03.05.2015 23:45

Алекс_,
ваш код и код Decode,
не предусматривают живое изменение текстового поля -- но оно похоже вам и ненужно

рони	04.05.2015 01:40

Цитата:

Сообщение от Алекс_

Decode,
не совсем)

код Decode выполняет туже функцию что и ваш, но похоже это для вас тёмный лес.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Тест</title>
</head>
<script>
window.addEventListener("load",function(){
 var inpElems = document.getElementsByName('v1'),
     inpTxt = document.getElementById('bb');
   Array.prototype.forEach.call(inpElems,function(item) {
        if(item.value == inpTxt.value) {
          item.checked = true;
        }
      });
    });
</script>
<body>
    <input type="text" value="first" id="bb" name ="but_1" />
    <input type="Radio" name="v1" value="year">
    <input type="Radio" name="v1" value="apple">
    <input type="Radio" name="v1" value="first">
    <input type="Radio" name="v1" value="wer">
    <input type="Radio" name="v1" value="treck">
    <output id="result"></output>
</body>
</html>

Decode, лучше вместо

if(item.value == inpTxt.value) {
          item.checked = true;
        }

использовать

item.checked = item.value == inpTxt.value;

тогда если совпадений не будет при следущей проверке ни один из radio не будет checked -- при вашей проверке нет возможности сброса.

рони	04.05.2015 01:57

Цитата:

Сообщение от Алекс_

а вот код который соответсвует вашему описанию - вводите ваши слова если такое слово есть среди radio произойдёт отметка

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Тест</title>
</head>
<script>
window.addEventListener("load", function() {
    var inpElems = document.getElementsByName('v1'),
        inpTxt = document.getElementById('bb');
    inpTxt.addEventListener("input", function() {
        var value = this.value;
        Array.prototype.forEach.call(inpElems, function(item) {
            {
                item.checked = item.value == value;
            }
        });
    })

});
</script>
<body>
    <input type="text" value="" id="bb" name ="but_1" />
    <input type="Radio" name="v1" value="year">
    <input type="Radio" name="v1" value="apple">
    <input type="Radio" name="v1" value="first">
    <input type="Radio" name="v1" value="wer">
    <input type="Radio" name="v1" value="treck">
    <output id="result"></output>
</body>
</html>

Часовой пояс GMT +3, время: 15:22.