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

Posted 2023-05-08

【中文标题】选择多个复选框并附加其值

【英文标题】：select multiple checkbox and append its value

【发布时间】：2014-07-12 13:13:11

【问题描述】：

这是场景，我有一个动态下拉按钮，每次用户选择它时，都会将带有复选框的名称列表查看到一个 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 中发现相同的想法我想包含在函数中

请大家再次赐教！ ;(

【问题讨论】：

请提供问题上下文中的所有代码，如何设置下拉列表，它的侦听器等。

如果你可以在 checkboxes.on('click'....

@aboca 我在 select 上使用了内联 onchanged 函数并调用了函数 multiselect

@Bhushan Kawadkar 我注意到了，但找不到将其组合在一起的方法

@mrrsb 那么每次你从下拉列表中更改一个项目时，它都会在那个时候遍历 DOM 元素，如果你更改了这些元素，那么它不会找到它们，因此它将填充文本为空白，因为没有选中复选框。我可能误解了你的问题。

【参考方案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();

【讨论】：

感谢您指出这一点。 checkboxes.on('click'.. 用于高亮复选框

感谢@undefined！现在的问题是如何保留 textarea 中的值

我调用了该函数并将其应用于 DOM。也许您有更好的方法将其附加到 DOM？ :)

在我的选择下拉列表中。我调用了一个函数 selectchanged()，该函数填充了名称列表。 code选择团队，然后我还调用了执行 fn.multiselect 的 selectfilter()。