单选按钮值显示在输入框中

时间:2011-12-14 11:02:52

标签: javascript jquery html

我在表单中有2个名为group1和group2的单选按钮组,组1和组2的值应出现在输入框名称total_size中,而不单击表单的提交按钮

示例:

<form>
<input type="radio" id="m1" name="group1" value=1/>
<input type="radio" id="m2" name="group1" value=2/>

<input type="radio" id="cm1" name="group2" value=1/>
<input type="radio" id="cm2" name="group2" value=2/>


<input type="text" id="total_size" name="total_size" value="RADIO BUTTON GROUP 1 VALUE and RADIO BUTTON GROUP2 VALUE"/>

格式应为group1,group2m

2 个答案:

答案 0 :(得分:2)

我也使用了jQuery:

$('input[type=radio]').change(function() {
    var v = '';
    $('input[type=radio]:checked').each(function() {

        if (v != '') {
            v += ',';
        }
        v += $(this).val();
    });

    $('#total_size').val(v);
});

你可以做很多事。此示例获取所有已检查的无线电组的值。所以如果你有更多,它们也会出现。

注意:
1.代码将在更改值时执行 2.点击在所有情况下都不适合我

答案 1 :(得分:1)

嗨,我认为你的意思是这样的。

<form>
<input type="radio" id="m1" name="group1" value='1' />
<input type="radio" id="m2" name="group1" value='2' />

<input type="radio" id="cm1" name="group2" value='1' />
<input type="radio" id="cm2" name="group2" value='2' />


<input type="text" id="total_size" name="total_size" value="RADIO BUTTON GROUP 1 VALUE and RADIO BUTTON GROUP2 VALUE"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {
    $(function() {
        $('input[type="radio"]').click(function(e){
            value = $("input[name=group1]:checked").val() + ',' + $("input[name=group2]:checked").val();
            $('#total_size').val(value);
        });
    });
})(jQuery);
</script>