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

时间:2014-05-23 08:49:18

标签: jquery select drop-down-menu

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

screenshot

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

enter image description here

问题是每次我选择下拉列表并检查项目时,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中找到了相同的想法

请再次帮助赐教! ;(

1 个答案:

答案 0 :(得分: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();