Ao trabalhar em um projeto, você encontrará dinamicamente as opções de crianças com base nas opções dos pais e listará várias caixas de seleção. Ao enviar, mescle os selecionados em um caractere e envie -os para o plano de fundo.
Este capítulo dirá como implementar esta operação através do controle JS:
1: Projete a categoria pai como rádio, adicione o evento OnClick a cada rádio e a categoria 1 padrão é o estado de seleção.
<input type = "caixa de seleção" name = "selectAll" id = "selectAll" onclick = "selectall ();" checado = "verificado"/> selecione todos <br> <input type = "radio" name = "lb" id = "lb" value = "1" onclick = "getzlb (1);" checkEd = "verificado"/> categoria 1 <input type = "radio" name = "lb" id = "lb" value = "2" onclick = "getzlb (2);"/> categoria 2 <input type = "radio" name = "lb" id = "lb" = "3" onClick = "getzlb"; 3);
2: Quando a página está carregando inicialmente, a subcategoria deve ser exibida de acordo com a categoria pai. Ao clicar no botão, a subcategoria também deve ser obtida, para que seja escrita como o mesmo método e chamado após a conclusão do carregamento da página.
window.onload = getzlb ();
3: Obtenha o método JS de subcategoria, obtenha dinamicamente dados em segundo plano através do método Ajax
/** * Obtenha a subcategoria e exiba -o após a conclusão do carregamento da página */function getZlb () {// get var obj = document.getElementsByName ("lb"); for (var i = 0; i <obj.length; i ++) {if (obj [i] .Checked) {getzlbNews (obj [i] .Value); }}} função getZlbNews () {(obtenha dados do tipo de mapa por meio de Ajax; retornar dados no resultado, formato json) var json = avaliar ("("+resultado+")); // Converta para o objeto json // Obtenha a área a ser exibida pelo subtipo var pai = document.getElementById ('xsqy'); // coloque a sub-região vazia para impedir o pai.innerhtml = ''; var p = 0; var span = ""; // Verifique todos os documentos.getElementById ("selectAll"). Checked = true; para (var i em json) {p ++; span = "<span style =/" display: inline-block; largura: 75px;/"> <tipo de entrada =/" caixa de seleção/"checked =/" checked/"onclick =/" checkSelectall ();/"nome =/" zlb/"value =/" "+i+"/">"+json [i]+"</span>"; // Quando houver mais de 11 caixas de sub-cheque, então newline if (p%11 == 0) {span = span+"<br>"; } // Adicione as caixas Sub-check uma a uma ao subfield parent.innerhtml = parent.innerhtml+span; }}4: lógica de fundo,
/ ** * Return Mapa Format Map <Code, Name> * @return */ public String getZlb () {map <Integer, String> zlb = Service.getzlb (); // converte mapa em formato json json a = jsonserializer.tojson (zlb); retornar a.toString (); }5: JS controla a lógica de selecionar tudo e selecionar tudo e como mesclar o código selecionado ao enviar
/ ** * Selecione tudo ou cancele tudo */ function selectalldz () {var caixa de seleção = document.getElementsByName ("zlb"); para (var i = 0; i <caixa de seleção.Length; i ++) {// Controle se a subcategoria é selecionada com base no botão selecionado tudo para controlar as caixas de seleção [i] .checked = document.getElementById ("selectall"). verificado; }}/ ** * Determine se a subcategoria está selecionada tudo, se o botão All selecionado for selecionado, caso contrário, o botão All selecionado não será selecionado */ function checkSelectall () {var caixa de seleção = document.getElementsByName ("zlb"); var ISSELECTALL = true; for (var i = 0; i <caixa de seleção.Length; i ++) {if (Caixas de seleção [i] .CHecked == false) {isselectall = false; }} if (ISSELECTALL == false) {document.getElementById ("selectall"). checked = false; } else {document.getElementById ("selectAll"). Checked = true; }}/*** em cena os IDs selecionados e separe -os com vírgulas*/function getAllIdstr (checkName) {var select = document.getElementsByName (CheckName); var idstr = new Array (); for (var i = 0; i <select.Length; i ++) {if (selecione [i] .CHecked == true) {idstr = idstr.Concat (selecione [i] .Value); }} retornar idstr.join (',');}6: Ao executar a próxima operação, se você enviar, transforme tudo selecionado em um caractere e atribua -o a uma caixa de texto oculta para enviá -la ao fundo
// Ligue para o método de identificação de splicing e passe o nome do elemento a ser operado sobre var allzlb = getallidstr ('zlb'); // Crie uma caixa de texto oculta, atribua a emendada e use -o para obter document.getElementById ('allzlbr'). Value = allzlb;O exposto acima é apenas uma opinião pessoal. Se você tiver alguma solução melhor, entre em contato.
O exposto acima é o conteúdo completo do método de implementação de obter opções de subcomplexos dinamicamente e projetar todas as seleções e envios trazidos a você. Espero que todos apoiem mais wulin.com ~