03.05.2015, 21:42
|
|
Новичок на форуме
|
|
Регистрация: 03.05.2015
Сообщений: 9
|
|
|
Сравнение значений текстового поля 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
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
|
Алекс_,
почему R большое?
|
|
03.05.2015, 22:16
|
|
Новичок на форуме
|
|
Регистрация: 03.05.2015
Сообщений: 9
|
|
Сообщение от рони
|
Алекс_,
почему R большое?
|
рони, суть вопроса совсем в другом, разницы нет, большая буква R или маленькая, и так и так работает. |
|
03.05.2015, 22:45
|
|
Профессор
|
|
Регистрация: 31.01.2015
Сообщений: 576
|
|
Алекс_, так?
<!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
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
|
Decode,
а если значение id="but_1" изменить ? тогда ваш код выдаст неверное значение при следующей проверке
|
|
03.05.2015, 23:28
|
|
Новичок на форуме
|
|
Регистрация: 03.05.2015
Сообщений: 9
|
|
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:36.
|
|
03.05.2015, 23:30
|
|
Новичок на форуме
|
|
Регистрация: 03.05.2015
Сообщений: 9
|
|
|
рони, не совсем тебя понимаю. Вопрос закрыт.
|
|
03.05.2015, 23:45
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
|
Алекс_,
ваш код и код Decode,
не предусматривают живое изменение текстового поля -- но оно похоже вам и ненужно
|
|
04.05.2015, 01:40
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
|
Сообщение от Алекс_
|
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
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
|
Сообщение от Алекс_
|
|
необходимо сделать проверку на совпадение значения текстового поля со всеми 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>
|
|
|
|
