jQuery checked checkbox value shown in input textbox and uncheck will remove
Question
I've been trying to find the solution as said in my title where when you have multiple checkboxes and when you check a checkbox with the value such as "blood" will be added to an input textbox. Each checked value in the textbox will be separated either with space or a comma. When you uncheck a checkbox the value corresponding to it will be removed from the textbox.
So far the closest example i've came across is from this one: Display checkbox value in textbox in the order of click
I've tried to change the code around a bit by using <input type="text" name="text" id="results" value="" /> and having $li.text(this.value); to $li.val(this.value); but nothing appears. Unfortunately jQuery isn't what I specialize in.
If possible can someone please shed some light?
2 answers
solution1
1 ACCPTED 2014-02-18 06:25:57
Maybe this is what you need?
var arr = [];
$('#inputs input').change(function() {
if (this.checked) {
arr.push(this.value);
}
else {
arr.splice(arr.indexOf(this.value), 1);
}
$('#target').val(arr + '');
});
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="inputs">
<input type="checkbox" value="Apple">
<input type="checkbox" value="Orange">
<input type="checkbox" value="Pineapple">
<input type="checkbox" value="Mango">
</div>
<input type="text" id="target"/>
</body>
</html>
solution2
0 2014-02-18 06:34:24
Try this
here you just need to apply a click event on all your check boxes. and fill the input box on every click.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.