Question

我有一张表格。我们称它为myform。

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

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

在表格的最后，有一个textarea。

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

正则表达式的替代方法是重新创建textarea的内容：

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的Attribute Starts With选择器：

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

Demo on jsfiddle

Answer 3

首先，您需要在复选框中添加onClick事件处理程序：

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

然后，在head部分中，在脚本标记中，输入

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

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

4 个答案: