jQuery将复选框中的值附加和删除到textarea答案

【问题标题】：jQuery append and remove values from checkbox to textareajQuery将复选框中的值附加和删除到textarea
【发布时间】：2014-07-18 05:45:50
【问题描述】：

我正在尝试将复选框的值附加或删除到 textarea，我尝试使用以下代码，该代码适用于 textbox 但不适用于 textarea。此外，它只是添加有关单击功能而不是检查功能的信息。任何人都可以帮我编写代码以在选中时将选项值添加到文本区域（不是文本框），并在取消选中时将其删除。

<input id="fulloptions" type="text" value="" />

<div id="alloptions">
    <ul>
    <li><input type="checkbox" name="option1" value="Option1" /> Test1</li>
    <li><input type="checkbox" name="option1" value="Option2" /> Test2</li>
    <li><input type="checkbox" name="option1" value="Option3" /> Test3</li>
    </ul>
</div>

Javascript：

$("#alloptions li input[type='checkbox']").click(function(e){    
    var cmd = $(this).val();    
        command = $("#fulloptions").val();
    if (command.indexOf(' '+cmd+' ')==0)
        return;
    else {
        $('#fulloptions').attr('value', cmd);
    }
});

我尝试了以下对我不起作用的代码

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

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案1】：

你可以做更多这样的事情

var checkboxes = $("#alloptions li input[type='checkbox']");

checkboxes.on('change', function() {
    $('#fulloptions').val(
        checkboxes.filter(':checked').map(function(item) {
            return this.value;
        }).get().join(', ')
     );
});

FIDDLE

【讨论】：