选中多个复选框并附加其值

Question

这是一个场景，我有动态下拉按钮，每次用户选择它都会查看带有复选框的名称列表到div;

如果选中该复选框，则值（ids）将附加到下面的textarea中;如果未选中则会删除该值。

：

问题是每次我选择下拉列表并检查项目时，textarea中的所有文本都将被删除。这是我的功能：

(function($) {
    jQuery.fn.multiselect = function() {
        $(this).each(function() {

            var checkboxes = $(this).find("input:checkbox");
            var selectAll  = $(this).find("input[class='checkAll']");

            selectAll.off('click').on('click', function() {
                $(this).closest('div').find(':checkbox').prop('checked', this.checked );
                $(this).closest('div').find(':checkbox').parent().toggleClass("multiselect-on", this.checked);
            });

            checkboxes.each(function() {
                var checkbox = $(this);

                checkboxes.on('change', function() {
                   $(this).parent().toggleClass("multiselect-on", this.checked);
                   var string = checkboxes.filter(":checked").map(function(){
                      return this.value;
                   }).get().join(",");

                   $('#empid').val(string);

                });
            });
        });
    };
    })(jQuery);

- 感谢@undefined最小化函数;）

[更新]功能

现在，函数正在使用select all选项。但这个想法必须是;如果其中一个项目未选中，则必须取消选中全选选项！

在我希望包含在函数

中的插件Multiple Select中找到了相同的想法

请再次帮助赐教！ ;（

Answer 1

假设#chekeditem正确选择了目标元素（ textarea ），您应该使用val方法而不是text。要设置/获取表单控件的值val，应使用方法。

请注意，您要将几个点击处理程序附加到each循环中的元素：

checkboxes.each(function() {
    ...
    // Add selected checkbox in textarea
    checkboxes.on('click' ...

jQuery on方法在内部迭代整个集合，你不必在第一时间使用循环。

您还可以缩小代码，不需要使用多个click（更好地倾听change事件）处理程序：

checkboxes.on('change', function() {
   $(this).parent().toggleClass("multiselect-on", this.checked);

   var string = checkboxes.filter(":checked").map(function(){
      return this.value;
   }).get().join(",");

   $('#chekeditem').val(string);
});

如果应在事件绑定后立即调用处理程序，则可以使用change()，trigger('eventName')或triggerHandler()方法触发事件。

checkboxes.on('change', function() {}).change();