Question

我在这里有一个小提琴：my fiddle。我要做的是从一组单独的列表中创建一个项目列表。我似乎无法理解我做错了什么，但这里发生了什么：

我有一组基于表格数据的列表
每个列表都有列名和选择复选框
如果我选择一个项目，则需要将其添加到所选列区域（垂直列表）
共有14个带有复选框的唯一表格项目
（问题 - ＆gt;）当我选择一个项目时，它会在所选列部分中添加14次

代码

（HTML）：

我尝试过插入HTML，但效果不正常。请看上面列出的小提琴。

（jquery的）：

var dte = // drag table elements
{
init: function() {
    var chkbx = $('.group input[type="checkbox"]:checkbox');
    //var chkbx = $('#accordion');
    for (var i = 0, ii = chkbx.length; i < ii; i++) {
        $(chkbx).bind("click", dte.adjustList);
    }
},

adjustList: function(event) {
    var list = [];
    var str = '';
    var eleval = event.currentTarget.value;
    var eleid = event.currentTarget.id;
    if (eleval == 1) {
        list.push(eleid);
        str = '<li>' + eleid + '</li>';
    }
    $('#vertical ul').append(str);
/*
    //var ele = event.currentTarget.id;
    var allVals = [];
    var str = '';
    //var obj = $("#"+ele);
    var ele = $('#accordion');
    $(obj+': checked').each(function(){
        allVals.push($(this.val()));
        dte.list.push($(this.val()));
        str += '<li>'+$(this.val())+'</li>';
    });
    $('#verticle').text(str);
    alert('List: ' + toString(list));
    */
}
};
dte.init();

Answer 1

init: function() {
    $('.group input:checkbox').bind("click", dte.adjustList);
},

Answer 2

您只需根据选择器绑定一次。

init: function() {
        var chkbx = $('.group input[type="checkbox"]:checkbox');
        $(chkbx).bind("click", dte.adjustList);
 },

fiddle

Answer 3

我编辑了你的小提琴，我删除了for loop。这是链接updated fiddle 您只需要将click事件绑定一次。

Answer 4

您多次绑定事件。你可以这样做：

init:function(){
  $('.group input[type="checkbox"]:checkbox').bind('click',dte.adjustList);
},

编辑你的小提琴：

http://jsfiddle.net/emphaticsunshine/tPAmc/

从选定的列表项创建列表

4 个答案: