Question

我最近开始学习jQuery，几周之后，我第一次找不到我在这个网站上的问题的答案，这让我觉得我在创建单选按钮时已经搞砸了。

我所做的一点细分：我有这个包含div的简单网页：

<div id="skins">

</div>

在这个div中，我将推送通过for循环生成的单选按钮，并为每个单元分配一个存储在名为skins

的数组中的文本。

for(var i in skins) {
  $("#skins").append("<input type='radio' class='result_skin' name='skin'>" + skins[i].name + "</br>")
}

我在每个单选按钮的末尾添加一个break，这样它们就会一个接一个地放在一起，而不是一个接一个地生成（所以它看起来像一个列表）

然后我想检查哪个单选按钮已被检查并返回其标签文本，经过研究，可以这样做：

$("#skins").click(function() {
    $("input:radio:checked").each(function() { 
       var text = $(this).text()
       console.log(text)
    })
})

这就是问题所在。在这种情况下，变量text作为空字符串返回，这导致我创建单选按钮的方式不正确。

有人可以帮我解决这个小问题吗？

Answer 1

单选按钮没有text。只有可以在开始和结束标记之间封装内容的元素才能使文本和单选按钮不会得到结束标记，因此它们永远不会“包含”任何内容，更不用说文本了。相反，他们有一个value，这就是他们的数据和最终意义所在的地方，而不是他们旁边的文字标题（你称之为标签）所说的。

所以，实际上你需要给每个单选按钮value，然后你可以通过以下方式获得该值：

$(this).val()

不

$(this).text()

试试这个：

var skinValues = ["one","two","three","four","five", "Champion zed"];

// Don't use for/in loops with arrays, use .forEach()
skinValues.forEach(function(skin){
  // each radio buttons needs a unique value and that's where its data is stored
  $("#skins").append("<input type='radio' class='result_skin' name='skin' value='" + skin + "'>" + skin + "</br>")
});

$("#skins").click(function(){
    $("input:radio:checked").each(function(){
       var text = $(this).val() // Radio buttons don't have text, they have a value
       console.log(text)
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="skins"></div>

Answer 2

单选按钮的基本用法是，您可以强迫人们从众多选择中选择一个。要达到此效果，您必须在要组合在一起的单选按钮上使用相同的name属性。

要找出某人选择的单选按钮，您可以使用以下代码确实检查jQuery：

$('input[name=radioName]:checked', '#myForm')

如果您想以某种形式搜索，则'#myForm'是可选的。

您在输入旁边写的文字与它完全无关。要获取输入的值，您应该添加value属性或其他数据属性。有关数据属性的更多信息can be found here。

将所有这些信息拼凑在一起，您的代码应如下所示：

制作皮肤清单

for(var i in skins){
  $("#skins").append("<input type='radio' class='result_skin' name='skin' value='" + skins[i].name + "'>" + skins[i].name + "</br>")
}

访问输入旁边的“文字”

var text = $('input[name=skin]:checked').val();

Answer 3

由于您使用单选按钮的值，请尝试不使用.text（），而使用.val（）代替

Answer 4

与广播关联的文字未链接到input标记。所以你必须将文本和input包装成父标记（类似于div）：

<div>
  <input type="checkbox"/>
  <span class="label">Text</span>
</div>

如果您想查看文字

$("input:radio:checked").each(function(){
   var text = $(this).parent().find( "span" ).text()
   console.log(text)
})

更新了JiFus更新的想法

您可以使用数据属性或值属性

for(var i in skins){
  $("#skins").append("<input type='radio' class='result_skin' name='skin' data-skin-name='" + skins[i].name + "'>" + skins[i].name + "</br>")
}

并使用dataset

进行调用

$("input:radio:checked").each(function(){
   var text = $(this).dataset['skin-name']
   console.log(text)
})

使用javascript / jQuery返回单选按钮的标签值

4 个答案: