复制标签文字以输入

Question

我已经尝试了几种方法来实现此目的，但是无论如何都无济于事。

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

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

Answer 1

您需要从单击的无线电中遍历DOM，以找到最近的label元素。

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

小提琴的例子

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

Answer 2

尝试这个：

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

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

Answer 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值绑定，而是将在整个页面中根据需要工作多次。

Answer 4

当您可以使用普通的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>