在选择复选框时,我需要从输入中获取值并在输入字段中插入值

时间:2016-09-29 23:32:41

标签: javascript jquery html

我正在尝试在复选框中获取值表单字段,基本上我要做的是当用户单击复选框时它应该从输入字段中获取数据并将其复制到下一个字段。<登记/> 这是我的代码:

jQuery(document).ready(function(){

jQuery('#check_1').change(function() {
        if(jQuery(this).is(":checked")) {
          
var address    = jQuery('#address').attr('value');
var address_2  = jQuery('#address2').attr('value');

alert('Copy selection');
alert(address);
alert(address_2);

$('#cpy_1').val(address);
$('#cpy_2').val(address_2);

 
}
});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' name='address' id="address"/>
<input type='text' name='address2' id='address2' />

<br>
<br>
<hr>
<br>
<h4>Data copied</h4>

<input type='checkbox' name='check_1' id="check_1"/>Copy above fields
<input type='text' name='cpy_1' id='1cpy_1'/>

<input type='text' name='cpy_2' id='cpy_2'/>

但是我通过获取输入文本的值来获得未定义。请告诉我那里有什么问题?

2 个答案:

答案 0 :(得分:1)

Try this:

var address    = jQuery('#address').val();
var address_2  = jQuery('#address2').val();

but i'm getting undefined by getting input text's value

It's because your inputs doesn't have attributes value:

<input type='text' name='address' id="address"/>
<input type='text' name='address2' id='address2' />

You have type, name and id without value.

答案 1 :(得分:1)

像这样改变:

$(document).ready(function() {
    
    $('#check_1').change(function() {
        
        if($(this).is(":checked")) {
            
            var address    = jQuery('#address').val();
            var address_2  = jQuery('#address2').val();
            
            $("#1cpy_1").val(address);
            $("#cpy_2").val(address_2);

        }
        
    })
    
})
  <input type='text' name='address' id="address"/>
<input type='text' name='address2' id='address2' />

<br>
<br>
<hr>
<br>
<h4>Data copied</h4>

<input type='checkbox' name='check_1' id="check_1"/>Copy above fields
<input type='text' name='cpy_1' id='1cpy_1'/>

<input type='text' name='cpy_2' id='cpy_2'/>
        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>