Jquery получает и отображает значения радио в реальном времени

У меня есть форма, содержащая переключатели. Они называются option1, option2 и option3. Каждая из этих радиокнопок имеет 3 разных значения потенциала.

Мне нужно отобразить текущее «проверенное» значение под формой. Я следил за руководством по jquery и сильно запутался.

<script>
function displayVals() {
  var opt1 = $('input:radio[name=option1]:checked').val() || [];
  var opt2 = $('input:radio[name=option2]:checked').val() || [];
  var opt3 = $('input:radio[name=option3]:checked').val() || [];
  $("p").html("First item is " + opt1.join(", ") + " the second is " + opt2.join(", ") + " and third is " + opt3.join(", ") + ".");
}

$("input").change(displayVals);
displayVals();

However, nothing displays below the form. For example, option1 could be either White, Red or Black. If they check black, I need it to say "First item is black the second is whatever and the third is whatever." Below the form updating each time one of the values changes.


forms html jquery radio-button
person Michael Clarke    schedule 22.09.2012    source источник
comment
Бьюсь об заклад, это вызывает исключение, потому что строки не имеют метода join.   -  person Prinzhorn    schedule 22.09.2012

Ответы (2)


arrow_upward
1
arrow_downward

Это должно работать. Вот скрипт jsfiddle

function displayVals() {
  var opt1 = $('input:radio[name=option1]:checked').val() || '';
  var opt2 = $('input:radio[name=option2]:checked').val() || '';
  var opt3 = $('input:radio[name=option3]:checked').val() || '';
  $("p").html("First item is " + opt1 + ", the second is " + opt2 + ", and third is " + opt3 + ",.");
}

$("input:radio").click(displayVals);
displayVals();​
person Sahil Kapoor    schedule 22.09.2012
comment
jsfiddle.net/HdtEj Я добавил это в фактический код, который я использую, но он не работает, требуются ли идентификаторы ? - person Michael Clarke; 22.09.2012
comment
В вашей скрипке не было тега ‹p›, который я добавил, вот обновленный jsfiddle - person Sahil Kapoor; 22.09.2012

arrow_upward
0
arrow_downward

val() возвращает строку или undefined и никогда не возвращает массив. Так что это должно быть

function displayVals() {
    var opt1 = $('input:radio[name=option1]:checked').val() || 'not selected';
    var opt2 = $('input:radio[name=option2]:checked').val() || 'not selected';
    var opt3 = $('input:radio[name=option3]:checked').val() || 'not selected';

    $("p").html("First item is " + opt1 + " the second is " + opt2 + " and third is " + opt3 + ".");
}
person Prinzhorn    schedule 22.09.2012