如何使用 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< 时才有效/code> 不包含任何特殊的正则表达式字符。在这种情况下，您必须转义它们。

更新：实际上，这里不需要正则表达式，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

Answer 2

jQuery

$('input[name="power_convention[]"]').click(function() {
    // assuming you only want the value if the checkbox is being ticked
    // not when it's being unticked
    if ($(this).is(":checked")) {
        $('#elm1').val("<h3>" + this.value + "</h3><br />");
    }
});

如果您希望它们都插入到同一个 textarea 中（并且它们是页面上唯一以 power_ 开头的字段），那么您可以更改选择器以使用
jQuery 的 属性开头 选择器：

`$('input[name^="power_"]`

jsfiddle 上的演示。

Answer 3

首先，您需要向复选框添加一个 onClick 事件处理程序：

<input type='checkbox' onClick="someFunction(this)" name='power_convention[]' value='SOME VALUE #1' />

然后，在 head 部分的 script 标记中，输入

someFunction(checkbox) {
    document.getElementById("elm1").value += "<h3>" + checkbox.value + "</h3>";
}

Answer 4

这是一个 jsfiddle

$('input:checkbox[name*=power_]').click(function(){
   value = '<h3>' + $(this).val() + '</h3> <br />'; 
    prevVal = $('#elm1').val();


    $('#elm1').val(prevVal  + value );
});