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

Question

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

如果复选框被选中，值（ids）将附加到下面的文本区域中；如果未选中，它将删除该值。

：

问题是每次我选择下拉菜单并选中一个项目时，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 最小化函数；）

[更新]函数

功能现在与全选选项相应地工作。但这个想法必须是；如果其中一项未选中，则必须取消选中全选选项！

在插件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事件) handlers：

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