这是一个场景,我有动态下拉按钮,每次用户选择它都会查看带有复选框的名称列表到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中找到了相同的想法请再次帮助赐教! ;(
答案 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();