Как получить проверенную радио-кнопку.показывает неопределенное

Question

Как я могу получить значение выбранной радиокнопки ниже, это мой HTML

<select id="pages>
   <option>option here</option>
   <option>option here</option>
</select>

<div class="form-group">
  <label for="line_spacing" class="col-sm-3 control-label">Line Spacing</label>
   <div class="col-sm-7">
     <div class="radio line_spacing_radio">
        <label>
          <input type="radio" name="line_spacing" value="Double Spacing" />
          <span class="cr"><i class="cr-icon glyphicon glyphicon-ok-sign"></i></span>
            Double Spacing
        </label>

        <label>
          <input type="radio" name="line_spacing" value="Single Spacing" />
          <span class="cr"><i class="cr-icon glyphicon glyphicon-ok-sign"></i></span>
            Single Spacing
        </label>
       </div>
    </div>
</div>

У меня есть событие, которое прекрасно работает, и я могу получить выбранное значение в режиме реального времени, но моя проблема в человекеполучение значения переключателя при выполнении другого события, которое я пробовал с помощью нескольких селекторов, ни один из них не работает для меня, в чем могут быть проблемы.

Ниже приведено событие, которое срабатывает, когда я переключаю радио.

$('input[type=radio][name=line_spacing]').change(function() {

   line_spacing_data = this.value;


});

вышеизложенное даст правильное радио, но когда я попытаюсь

var line_spacing = $('input[type=radio][name=line_spacing]:checked').val();

или

var line_spacing = $('input[name="line_spacing"]:checked').val();

или

var line_spacing2 = $('[name="line_spacing"]:checked').value;

все яget не определено, это потому, что я хочу получить значение и использовать его в другом действии.

вот как я хочу получить проверенное радио

$('#pages').on('change', function(){

    var line_spacing2 = $('[name="line_spacing"]:checked').value;
});

Answer 1

Возможно, добавьте onchange = function () к метке радиосвязи.

Вот пример.Вы можете попробовать это в CodePen здесь .

<script>
    function changeSpacing(value) {

        document.getElementById("selection").innerHTML = value;

    }
</script>

<div class="form-group">
  <label for="line_spacing" class="col-sm-3 control-label">Line Spacing</label>
   <div class="col-sm-7">
     <div class="radio line_spacing_radio">
        <label>
          <input type="radio" name="line_spacing" value="Double Spacing" onchange="changeSpacing(this.value)" />
          <span class="cr"><i class="cr-icon glyphicon glyphicon-ok-sign"></i></span>
            Double Spacing
        </label>

        <label>
          <input type="radio" name="line_spacing" value="Single Spacing" onchange="changeSpacing(this.value)"/>
          <span class="cr"><i class="cr-icon glyphicon glyphicon-ok-sign"></i></span>
            Single Spacing
        </label>
       </div>
    </div>
</div>

<div id="selection">nothing selected</div>

Answer 2

Я узнал, что я выполняю свою строку слишком рано, ниже, как я делал это раньше

var line_spacing2 = $('[name="line_spacing"]:checked').val;
$('#pages').on('change', function(){
  alert(line_spacing2);    /// this was throwing the error undefined
});

, как советовал @ undefined

, вот как я делаю это сейчас иполучить ответ я хочу

$('#pages').on('change', function(){

  var line_spacing2 = $("input[type=radio][name=line_spacing]:checked").val();
  alert(line_spacing2); //this is OK
});

Answer 3

Ваш код кажется правильным!У вас есть неопределенное значение, потому что вы не сделали никакого выбора!Вы должны управлять этим делом (см. Мой код) или просто сделать одну из переключателей, выбранных по умолчанию:

$("#ok").on("click", function(){
  var line_spacing = $('input[name=line_spacing]:checked').val();
  if (line_spacing == null)
  	alert('Please make selection !')
  else
  	alert(line_spacing)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="form-group">
  <label for="line_spacing" class="col-sm-3 control-label">Line Spacing</label>
   <div class="col-sm-7">
     <div class="radio line_spacing_radio">
        <label>
          <input type="radio" name="line_spacing" value="Double Spacing" />
          <span class="cr"><i class="cr-icon glyphicon glyphicon-ok-sign"></i></span>
            Double Spacing
        </label>

        <label>
          <input type="radio" name="line_spacing" value="Single Spacing" />
          <span class="cr"><i class="cr-icon glyphicon glyphicon-ok-sign"></i></span>
            Single Spacing
        </label>
       </div>
    </div>
</div>
<input type="button" id="ok" value="Get choice">

</form>

Answer 4

Ваш селектор выглядит неправильно.Вы должны использовать

var checkbox = $('[name="line_spacing"]');
var checkbox_value = checkbox.value;

Селектор [name="line_spacing"]:checked установит ваш флажок, только если он установлен.Селектор делает ваше чтение на .value недоступным.

Answer 5

Возможно, вы выполняете эту строку слишком рано, то есть до того, как выбрано какое-либо радио.Ваши радио не проверены, поэтому запросы не выбирают ни одного элемента.Вызов .val() для пустой коллекции: undefined.

Вам нужно запускать запрос в обработчике событий всякий раз, когда вы хотите получить текущее проверенное значение радио, если оно есть!

Answer 6

Я думаю, это потому, что вы проверяете значение вашего ввода до того, как оно будет фактически выбрано.Код ниже работает отлично.Если нет переключателя, соответствующего селектору :checked, тогда этот селектор вернет undefined.

function checkvalue() {
    alert($("input[type=radio][name=line_spacing]:checked").val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="line_spacing" class="col-sm-3 control-label">Line Spacing</label>
   <div class="col-sm-7">
     <div class="radio line_spacing_radio">
        <label>
          <input type="radio" name="line_spacing" value="Double Spacing" />
          <span class="cr"><i class="cr-icon glyphicon glyphicon-ok-sign"></i></span>
            Double Spacing
        </label>

        <label>
          <input type="radio" name="line_spacing" value="Single Spacing" />
          <span class="cr"><i class="cr-icon glyphicon glyphicon-ok-sign"></i></span>
            Single Spacing
        </label>
       </div>
    </div>
    <button onclick="checkvalue()" >Check value</button>
</div>

Answer 7

Я привел вам один пример, он будет печатать на консоли значение проверенной радиокнопки каждые 2 секунды (если никто не отмечен, он будет печатать неопределенное, как вы увидите при запуске программы).

$(document).ready(function()
{
    setInterval(function()
    {
        var line_spacing = $('input[type="radio"][name="line_spacing"]:checked').val();
        console.log(line_spacing);
    }, 2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">

    <label for="line_spacing" class="col-sm-3 control-label">Line Spacing</label>

    <div class="col-sm-7">
    <div class="radio line_spacing_radio">

        <label>
            <input type="radio" name="line_spacing" value="Double Spacing" />
            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok-sign"></i></span>
            Double Spacing
        </label>

        <label>
            <input type="radio" name="line_spacing" value="Single Spacing" />
            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok-sign"></i></span>
            Single Spacing
        </label>

    </div>
    </div>

</div>