2

我已经尝试了几种方法来实现这一点，但不知何故对此没有任何作用。

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

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

4 回答 4

3

您需要从被单击的收音机遍历 DOM 以找到最近的label元素。

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

示例小提琴

但是，您也可以使用$(this).next('label')它，这取决于label元素的位置不变。我的第一个例子意味着label可以在与li单选按钮相同的任何地方，它会起作用。

于 2013-11-06T09:34:13.473 回答
1

试试这个：

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

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

于 2013-11-06T09:42:59.817 回答
1

这是一个稍微难以回答的问题。您的 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());
});

此代码与idHTML 的这一特定位中的值无关，但会在整个页面中根据需要多次运行。

于 2013-11-06T09:45:51.630 回答
0

当您可以使用纯 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>
于 2013-11-06T09:39:45.977 回答