1

Подскажите пожалуйста. Есть три радиокнопки. При нажатии на них срабатывает скрипт только когда жмешь на первую. В чем подвох?

<script>
$("#qFL1").change(function(){
  if($(this).val() == "1") alert("Нажата 1"); 
  else if($(this).val() == "2") alert("Нажата 2");
  else alert("Нажата 3"); 
});
</script>

<html>
  <input type="radio" name="qFL1" id="qFL1" value="1">;
  <input type="radio" name="qFL1" id="qFL1" value="2">;
  <input type="radio" name="qFL1" id="qFL1" value="3">;
</html>
1
  • 1
    Потому что id должен быть уникальным. Иначе выбирается первый встреченный элемент.
    – Alex78191
    19 июл 2017 в 9:36

2 ответа 2

2

Может, банальнее?

$("#qFL1").change(function(){alert("Нажата 1");});
$("#qFL2").change(function(){alert("Нажата 2"); });
$("#qFL3").change(function(){alert("Нажата 3"); });
<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <input type="radio" name="qFL1" id="qFL1" value="1">;
  <input type="radio" name="qFL1" id="qFL2" value="2">;
  <input type="radio" name="qFL1" id="qFL3" value="3">;
</html>

2
  • тогда можно все три выбрать. Нужно только одну. Оп стоп, так я еще не делал)))
    – VitVlad
    19 июл 2017 в 9:28
  • @VitVlad Отнюдь
    – AtCliff_
    19 июл 2017 в 9:29
2

Потому что id должен быть уникальным. Поменяйте id на класс:

$(".qFL1").change(function(){
  if($(this).val() == "1") alert("Нажата 1"); 
  else if($(this).val() == "2") alert("Нажата 2");
  else alert("Нажата 3"); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="qFL1" class="qFL1" value="1">;
<input type="radio" name="qFL1" class="qFL1" value="2">;
<input type="radio" name="qFL1" class="qFL1" value="3">;

То же самое без jquery:

Array.from(document.getElementsByClassName("qFL1")).forEach(element => 
  element.addEventListener('click', e => 
    alert(`Нажата ${e.target.value}`)
  )
);
1<input type="radio" name="qFL1" class="qFL1" value="1">;
2<input type="radio" name="qFL1" class="qFL1" value="2">;
3<input type="radio" name="qFL1" class="qFL1" value="3">;

6
  • 1
    Можно по name CSS селектор сделать.
    – Alex78191
    19 июл 2017 в 9:36
  • @Alex78191 можно вообще без селектора
    – Darth
    19 июл 2017 в 9:37
  • В смысле? Через onclick?
    – Alex78191
    19 июл 2017 в 9:38
  • легче alert("Нажата " + $(this).val());
    – Alex78191
    19 июл 2017 в 9:40
  • 1
    @Alex78191 В целом я согласен, но работает он в разы медленее
    – Darth
    19 июл 2017 в 9:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.