将标签文本复制到输入

copy label text to input

本文关键字：输入 复制 文本 标签      更新时间：2023-09-26

我已经尝试了几种方法来实现这一目标，但不知何故没有任何效果。

如何将用户选择的相应单选按钮的"标签文本"实时复制到输入字段（结果框）中？

.HTML- 

<ul class="gfield_radio" id="input_4_4">
    Radio Buttons:  
    <br />
    <li class="gchoice_4_0">
        <input name="input_4" type="radio" value="2" id="choice_4_0" class="radio_s" tabindex="4">
        <label for="choice_4_0">Hi</label>
    </li>
    <li class="gchoice_4_1">
        <input name="input_4" type="radio" value="4" id="choice_4_1" class="radio_s" tabindex="5">
        <label for="choice_4_1">Hello</label>
    </li>
    <li class="gchoice_4_2">
        <input name="input_4" type="radio" value="3" id="choice_4_2" class="radio_s" tabindex="6">
        <label for="choice_4_2">Aloha</label>
    </li>
</ul>
<br />
<div class="ginput_container">
    Result Box: 
    <br />
    <input name="input_3" id="input_4_3" type="text" value="" class="medium" tabindex="3">
</div>

我的尝试：

$('input').change(function() { 
    if (this.checked) { 
        var response = $('label[for="' + this.id + '"]').html(); 
        alert(response); 
    } 
    // also this:
 //   if ($("input[type='radio'].radio_s").is(':checked')) { 
 //       var card_type = $("input[type='radio'].radio_s:checked").val();               
 //       alert('card_type'); 
 //   } 
});
您需要

从单击的无线电遍历 DOM 以找到最近的label元素。

$('.radio_s').change(function() {
    $('#input_4_3').val($(this).closest('li').find('label').text());
});

示例小提琴

但是，您也可以使用$(this).next('label')，它依赖于label元素的位置不变。我的第一个示例意味着label可以位于与单选按钮相同的li内的任何位置，并且它将起作用。

试试这个：

$('.radio_s').click(function() {
$("#input_4_3").val($("input:checked" ).next().text());
});

演示：http://jsfiddle.net/WQyEw/3/

这是一个有点棘手的问题，很难回答。HTML 的结构意味着页面上可能有多个这些结构。因此，您可能有多个带有相应复选框的单选按钮集。

我已经将一些工作代码放入jsFiddle中。

我做了一个更改：您在问题中的所有代码现在都在<div class="container">.您需要与单选按钮和复选框组一样多的单选按钮和复选框。

然后你可以有这样的jQuery代码：

$('ul.gfield_radio').on('change', 'input[type="radio"]', function () {
    var label = $('label[for="' + this.id + '"]');
    $(this).closest('.container').find('input.medium').val(label.text());
});
此

代码不绑定到此特定 HTML 位中的id值，但会在整个页面中根据需要多次工作。

当你可以用纯JavaScript实现它时，为什么要依赖第三方库： 

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var a = document.getElementsByName('input_4');
        for (var i = 0; i < a.length; i++) {
            document.getElementsByName('input_4')[i].addEventListener('change', function () {
                showValue(this);
            }, false);
        }
    }, false);
    function showValue(element) {       
        alert(element.parentNode.getElementsByTagName('label')[0].innerHTML)
    }
</script>
相关文章：