Question

我需要做一些事情（我认为）非常简单，但是我没有jquery的知识，而且它不起作用：我想在文本输入中显示无线电输入的值（#selected）。

在我的档案中，我有：

<div class="current">
    <input id="selected" name="selected" type="text" placeholder="Value1" />
    <ul id="test">
      <li><label><input type="radio" value="Value1" name="type">Value1</label></li>
      <li><label><input type="radio" value="Value2" name="type">Value2</label></li>
    </ul>
 </div>

<script> 
jQuery('label').on('click', function () {
$("selected").text($(this).text());
});
</script>

我想点击标签，因为必须隐藏收音机。

我尝试过很多东西，但它永远不会奏效，有人可以帮助我吗？预先感谢您的帮助！：）

Answer 1

我建议：

$('input[type="radio"]').on('change', function(){
    $('#selected').val(this.value);
});

JS Fiddle demo

由于您有label元素与input元素相关联，change事件仍然会被触发（尽管被隐藏）。

为了防止稍后被解雇的change事件，通过以某种方式取消选中，您可以将上述内容修改为：

$('input[type="radio"]').on('change', function () {
    $('#selected').val(this.checked ? this.value : $('input[type="radio"][name="' + this.name + '"]:checked').val());
});

JS Fiddle demo

如果已检查（this.value），则将值设置为已更改元素的值（this.checked），否则将设置为相同name的已检查无线电输入的值

参考文献：

on()。
val()。

Answer 2

您可以使用：

jQuery('label').on('click', function () {
    $("#selected").val($(this).find('input[type=radio]').val());
});

<强> Fiddle Demo

Answer 3

$('input[type="radio"]').on('change', function(){
   if($(this).is(':checked'))
      $('#selected').val($(this).val());
});

Answer 4

您要小心的最重要的事情是不要让您的选择范围太大。如果要在包含其他输入/单选按钮的页面上实现此功能，则可能会意外地在该字段中获取其他值。这是我的建议：

首先，将HTML重组为如下所示：

<div class="current">
    <input id="selected" name="selected" type="text" placeholder="Value1" />
    <ul id="test">
        <li><input type="radio" value="Value1" id="type-value-1" name="type"><label for="type-value-1">Value1</label></li>
        <li><input type="radio" value="Value2" id="type-value-2" name="type"><label for="type-value-2">Value2</label></li>
    </ul>
 </div>

然后你的javascript应该是这样的：

<script> 
$('input[name="type"]').change(function(evt) {
    $('#selected').val($(this).val());
});
</script>

我能看到的问题是：

选择器应该按名称选择输入，因为这会对单选按钮进行分组，并确保您只定位要使用的特定组。您可以使选择器更具体，并以“[type ='radio']”为目标，但这可能有点过分。
无线电输入标签应指定特定单选按钮的唯一ID，以便可以单独定位它们，以便在标签中指定for =标签，使其可单击并直接与单选按钮关联。 / LI>

在文本输入中显示无线电值

4 个答案: