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, и включить значение true у того radio, у которого значение совпало со значением текст. поля.
а вот код который соответсвует вашему описанию - вводите ваши слова если такое слово есть среди 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, время: 12:16.