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());
});

Example fiddle

您也可以使用$(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的结构意味着页面上可能存在多个这样的结构。因此，您可能有多个带有相应复选框的单选按钮。

我已将一些有效的代码放入a 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>

复制标签文本以输入

4 个答案: