jQuery将checkbox中的值附加并删除到textarea

时间:2014-07-18 05:45:51

标签: javascript jquery html checkbox

我正在尝试将复选框的值附加或删除到textarea,我尝试使用以下代码,它可以正常使用文本框而不是textarea。此外,它只是添加关于点击功能的信息而不是检查功能。任何人都可以帮我修改代码,在检查时将选项值添加到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);    
    }
});

1 个答案:

答案 0 :(得分:5)

你可以做更像这样的事情

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