在TextArea中添加/删除复选框值
提问于 2012-03-19 16:08:24
我搜索了网站，发现了一些例子，我接近了，但还不够接近。我有两个复选框，如果用户选中了它们，如果用户取消选中，它们会被放在文本区中。该值将被删除。我也想保持光标的位置。
我可以添加，但它仍然笨拙。
我的小提琴是http://jsfiddle.net/pU2P9/18/
以下是我的代码
Testing. Values from another field will be inserted here. <form>
<p>Favorite Color <label><input type="checkbox" value="Green" />Green</label>
<label><input type="checkbox" value="Red" />Red</label></p>
</form>
var textarea = document.getElementById("myTextArea1");
// $('input[type=checkbox]').click(function () {
$('input[type=checkbox]').change(function () {
var $parentForm = $(this).closest("form");
// var text = $(".insert-text", $parentForm).val();
var text = $('input[type=checkbox]:checked').val() + " ";
// var text = $('input[type=checkbox]:checked', $parentForm).val() + " ";
insertAtCursor(textarea, text);
});
function insertAtCursor(myField, myValue) {
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
}
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
}
else {
myField.value += myValue;
}
}
;任何帮助都将不胜感激。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-03-19 17:11:09
不确定你到底想做什么，但看起来你有点困惑。
试试像这样的东西
$('input[type=checkbox]').change(function () {
if ($(this).is(':checked')) {
var text = $(this).val() + " ";
insertAtCursor(textarea, text);
}
});Stack Overflow用户
发布于 2012-03-19 17:30:01
我认为你这样对待textarea会让你自己发疯的。您可以很容易地预先添加颜色，但是当用户取消选中它们时，您该怎么办？例如，如果他们先选中绿色，然后选中红色，然后取消选中绿色，该怎么办？现在，从textarea中删除5个字符不再是一个简单的问题。
但是，如果我理解您的应用程序，您将组合来自textarea中不同字段的值，因此我将执行以下操作：
function updateTextArea() {
var text = "";
$('input[type=checkbox]:checked').each( function() {
text += $(this).val() + " ";
});
$('input[type=text]').each( function() {
text += $(this).val() + " ";
});
$('#myTextArea1').val( text );
}然后，您可以在每次更改某个值时调用此函数。例如，当用户更改其中一个复选框时：
$('input[type=checkbox]').change(function () {
updateTextArea();
});我相信这将比你所描述的方法干净得多。你可以在这里看到它的实际效果：http://jsfiddle.net/8y4D8/19/
此外，您还可以考虑使用Backbone.js (http://documentcloud.github.com/backbone/)或其他类似的Javascript MVC框架。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9773650
复制相关文章
![如何删除 JavaScript 数组中的虚值[每日前端夜话0x55]](https://ask.qcloudimg.com/http-save/yehe-1120945/wb8lkulm9p.jpeg)
点击加载更多
相似问题
从Textarea中添加/删除Textbox值
如何定义$(this)以向textarea添加复选框值
jQuery将复选框中的值附加和删除到textarea
Javascript复选框添加值Textarea
从复选框中添加/删除值
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
