I have a checkbox with a value of U
i want to put this value into a text input when the checkbox is checked.
how can i do this using javascript or jquery? I need to be able to do it on multiple checkboxes and input text fields too
-
There are a lot of ways of doing this, however it would entire depend on how you page is structured. Please post your HTML and any JS code you have already tried.Rory McCrossan– Rory McCrossan2013-10-23 10:37:03 +00:00Commented Oct 23, 2013 at 10:37
-
You need to provide more information, like things you've tried, what code you have so far, etc.Jeffrey Kevin Pry– Jeffrey Kevin Pry2013-10-23 10:37:07 +00:00Commented Oct 23, 2013 at 10:37
Add a comment
|
4 Answers
HTML
<input type="checkbox" value="U" id="checkBox"/>
<input type="text" value="" id="textInput" />
JQUERY
$("#checkBox").change(function(){
$("#textInput").val($(this).val());
});
1 Comment
charlie
can you make it so when the box is uncheck it will remove the checkbox value?
Try this,
HTML
<label><input type="checkbox" value="U" />Check</label>
<input type="text" />
SCRIPT
$('input[type="checkbox"]').on('click',function(){
var is_checked=$(this).prop('checked');
var val='';
if(is_checked)
val=this.value;
$('input[type="text"]').val(val);
});
Comments
the simpliest way to do this :o)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var checkboxInput = document.getElementById('checkboxInput'),
textInput = document.getElementById('textInput');
checkboxInput.addEventListener('click', UpdateTextInput, false);
};
function UpdateTextInput () {
if(checkboxInput.checked) {
textInput.value = checkboxInput.value;
}
else {
textInput.value = '';
}
}
</script>
</head>
<body>
<input type="checkbox" id="checkboxInput" value="U"/>
<input type="text" id="textInput" />
</body>
</html>
Comments
Assuming one textbox is associated with every checkbox like below.
HTML Pattern :
<input type="checkbox" value="test1" id="test1" checked><label>Test</label>
<input type="text" class="text1"id="textbox1" name="textbox1" value="">
jQuery:
$('input[type="checkbox"]').change(function() {
var vals = $(this).val();
if($(this).is(':checked')){
$(this).next().next("input[type='text']").val(vals);
}else{
$(this).next().next("input[type='text']").val("");
}
});
Here is the working demo : http://jsfiddle.net/uH4us/
2 Comments
charlie
perfect! is this possible without having the <label> on the checkboxes? i have tried removing it and it stops working
Nishu Tayal
@charlie: Yeah, it's possible. Use
$(this).next("input[type='text']").val(vals);Here is the updated fiddle : jsfiddle.net/uH4us