Форум

Алекс_ · #1 (**permalink**) 03.05.2015, 21:42

Прошу помочь

сам новичок в языке 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, у которого значение совпало со значением текст. поля.
заранее спасибо

рони · #2 (**permalink**) 03.05.2015, 22:00

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

Алекс_ · #3 (**permalink**) 03.05.2015, 22:16

Сообщение от рони

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

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

Decode · #4 (**permalink**) 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>

рони · #5 (**permalink**) 03.05.2015, 22:56

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

Алекс_ · #6 (**permalink**) 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>

Алекс_ · #7 (**permalink**) 03.05.2015, 23:30

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

рони · #8 (**permalink**) 03.05.2015, 23:45

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

рони · #9 (**permalink**) 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 -- при вашей проверке нет возможности сброса.

рони · #10 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript