如何获取选中的单选按钮。显示未定义

时间:2018-10-11 21:01:42

标签: javascript jquery jquery-ui

如何获取所选单选按钮的值 下面是我的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;

所有我得到的都是未定义的,这是因为我想获得在其他操作中使用它的值。

这就是我要检查收音机的方式

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

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

7 个答案:

答案 0 :(得分:2)

您可能太早执行了该行,即在选择任何广播之前。您的无线电未选中,因此查询不会选择任何元素。在空集合上调用.val()undefined

无论何时要获取当前检查的无线电的值(如果有),都需要在事件处理程序中运行查询

答案 1 :(得分:1)

我发现我执行行的时间太早了 以下是我之前的做法

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
});

答案 2 :(得分:0)

我已经举了一个例子,它将每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>

答案 3 :(得分:0)

我认为这是因为您正在实际选择输入之前检查输入的值。下面的代码工作正常。如果没有与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>
arr = matrix.map(&:dup).transpose
out = []
loop do
  out = out + arr.shift
  break out if arr.empty?
  arr = arr.transpose.reverse
end
  #=> [1, 5, 9, 13, 14, 15, 16, 12, 8, 4, 3, 2, 6, 10, 11, 7]

答案 4 :(得分:0)

您的代码似乎是正确的!您没有确定的价值,因为您没有做出任何选择!您必须处理这种情况(请参阅我的代码),或者简单地将默认情况下的单选按钮之一选中:

$("#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>

答案 5 :(得分:0)

也许在无线电标签上添加onchange = function()。

这里是一个例子。您可以在CodePen here中进行尝试。

<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>

答案 6 :(得分:-2)

您的选择器看起来不对。您应该使用

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

[name="line_spacing"]:checked选择器只会选中您的复选框。选择器使您无法读取.value