Problema com CheckBox JavaScript

Galera estou com um pequeno problema aqui com meus checkboxs…
Seguinte tenho duas listas de checkboxs que monto em tempo de execucao, o problema que em cada um deles eu implemento um conclick e se eu clico em um deles ele faz o evendo nas duas listas, tipo em cada lista eu possuo uma lista de checkbox com dados diferentes o que acontece é que ao clicar no check da lista de baixo faz a funcao do check da lista de cima, e agora o que posso fazer:

populando lista 1

var li = document.createElement("li");

                var check = document.createElement('input');
                check.type = 'checkbox';
                check.value = linha.codigo;                
                check.onclick = function(){                    
                    var ul = document.getElementById('lista');
                    var check = ul.getElementsByTagName('input');                    
                    var opcoes = [];
                    for (i = 0; i < check.length; i++) {
                        if (check[i].checked) {
                            var array = {"codigo":check[i].value};
                            opcoes.push(array);
                        }else{
                            opcoes;
                        }
                    }

                    var selecaoString = JSON.stringify(opcoes);

                    var selecaoField = $('#codigo');
                    selecaoField.val(selecaoString);

                }
                li.appendChild(check);

                var span = document.createElement('span');
                $(span).html(linha.codigo);
                li.appendChild(span);                

                ul.appendChild(li);

Lista 2

var liGrid = document.createElement("li");

                var checkGrid = document.createElement('input');
                checkGrid.type = 'checkbox';
                checkGrid.value = linhaGrid.codigo;                
                checkGrid.onclick = function(){                    
                    var ulGrid = document.getElementById('listaGrid');
                    var checkGrid = ulGrid.getElementsByTagName('input');
                    var opcoes = [];
                    for (i = 0; i < checkGrid.length; i++) {
                        if (checkGrid[i].checked) {
                            var array = {"codigo":checkGrid[i].value};
                            opcoes.push(array);
                        }else{
                            opcoes;
                        }
                    }

                    var selecaoGridString = JSON.stringify(opcoes);

                    var selecaoGridField = $('#codigoGrid');
                    selecaoGridField.val(selecaoGridString);

                }
                liGrid.appendChild(checkGrid);

                var spanGrid = document.createElement('span');
                $(spanGrid).html(linhaGrid.codigo);
                liGrid.appendChild(spanGrid);

                ulGrid.appendChild(liGrid);

Html da lista 1

<input wicket:id="codigo" id="codigo" type="text"/>
    <div style="overflow:auto;width:100px;height:100px;border:1px solid #336699;padding-left:5px">
        <ul id="lista" />
    </div>

Html da lista 2

<input wicket:id="codigoGrid" id="codigoGrid" type="text"/>
    <div>
        <ul id="listaGrid" />
    </div>

Desde já agradeço…

Topicos relacionados