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