javascript - 如何使用 ajax/javascript 在表单中附加文本？

Question

我有一个表格。我们将其命名为 myform。

里面有复选框，例如这两个:

<input type='checkbox' name='power_convention[]' value='SOME VALUE #1' />
<input type='checkbox' name='power_evidence[]' value='SOME VALUE #2' />

在表单的末尾，有一个文本区域。

<textarea id="elm1" name="comments" rows="15" cols="80" style="width: 80%">

如果选中 power_convention，我希望它立即将该复选框的值附加到具有以下结构的 comments 复选框中:

<h3>SOME VALUE #1</h3><br />

类似地，如果单击 power_evidence，我希望它做同样的事情，但显然是在它之前发生的事情之后。

我该如何去做呢？

谢谢!

Answer 1

jQuery 解决方案:

$('input[type="checkbox"]').change(function() {
    var val = "<h3>" + this.value + "</h3><br />";
    if(this.checked) {
        $('#elm1').val(function(i, v) {
            return v + val;
        });
    }
    else {
        $('#elm1').val(function(i, v) {
            return v.replace(new RegExp(val), '');
        });
    }
});

DEMO

仅当 val 不包含任何特殊正则表达式字符时才有效。在这种情况下you would have to escape them .

更新:实际上，这里不需要正则表达式，v.replace(val, '') 就可以了(感谢@Pinkie)；

正则表达式的替代方法是重新创建文本区域的内容:

var $inputs = $('input[type="checkbox"]');
$inputs.change(function() {
    var val = "<h3>" + this.value + "</h3><br />";
    if(this.checked) {
        $('#elm1').val(function(i, v) {
            return v + val;
        });
    }
    else {
        $('#elm1').val('');
        $inputs.not(this).change();
    }
});

DEMO 2