Question

我仔细搜索了这个网站，发现了一些例子，我接近但不够近。我有2个复选框，如果用户检查它们，如果用户删除了支票，则将它们放在textarea中。该值已被删除。我也希望保持光标位置。

我能够添加，但它仍然笨重。

这是我的代码

测试。来自其他字段的值将插入此处。

    <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;
    }
 }
 ;

任何帮助都将不胜感激。

Answer 1

不确定完全你想要做什么，但似乎你有点困惑。

尝试类似

的内容

$('input[type=checkbox]').change(function () {
    if ($(this).is(':checked')) {
        var text = $(this).val() + " ";
        insertAtCursor(textarea, text);    
    }
});

Answer 2

我认为你会像你一样对待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框架。

将复选框值添加/删除到TextArea中

2 个答案: