Jump to content

Recommended Posts

PESSOAL, MEU CODIGO NAO FUNCIONA, AO MARCAR CHECKBOX OU CLICANDO NO BOTAO GOSTARIA QUE A CELULA FOSSE SOMBREADA. PECO A GENTILEZA DE QUEM FOR AJUDAR REENVIE O CODIGO POR COMPLETO. OBRIGADO

 

 

 

 

<!DOCTYPE html>
<html>
<body>

<script>

mapCheckbox = [

  {
    alert alert('funcao Mapeia Checkbox'); ,        // checkbox que será clicado

  },

  {
    checkboxId: '3DS Max',        // checkbox que será clicado
    cells: ['B1', 'C1'],        // as células que serão pintadas
    color: '#00ff55'            // a cor das células
  },
  {
    checkboxId: 'Adobe + Audacity',
    cells: ['A2', 'B3'],
    color: '#7ddce4'
  },
  {
    checkboxId: 'Anaconda Python 5',
    cells: ['G1', 'H1'],
    color: '#8e90c0'
  },
]
  
// Percorre todos os checkbox com o atributo "name" igual a "checkbox1"
// E adiciona um ouvinte de clique em cada um (que executa a ação abaixo quando ocorre o clique)
document.querySelectorAll('input[name=checkbox1]').forEach(checkbox => checkbox.addEventListener("click", function(){

  // Atribui à variável as opções do checkbox clicado
  const checkboxOptions =  mapCheckbox.find(items => items.checkboxId.trim() === checkbox.id.trim());
  // Pega as células que serão pintadas ao clicar neste checkbox
  const cells = checkboxOptions ? checkboxOptions.cells : null;
  // Pega todos as tags "td"
  const tdItems = document.getElementsByTagName('td');


  // Percorre todas as tags "td" (células) para verificar se alguma corresponde à célula do checkbox clicado
  for(let i = 0; i < tdItems.length; i++) {

    const tdContent = tdItems.textContent.trim(); // Pega o texto da célula atual para verificar
    const cellFound = cells && cells.findIndex(cell => cell === tdContent) > -1;    // Verifica se a célula atual está contida no mapCheckbox do checkbox clicado

    // Se o checkbox está marcado e a célula foi encontrada
    if(checkbox.checked && cellFound) {
      // Adiciona a cor predefinida
      tdItems.setAttribute('bgcolor', checkboxOptions.color);
    }
    // Se o checkbox não estiver marcado e a célula atual (no loop) está contida no mapCheckbox do checkbox clicado
    // Remove a cor
    else if(!checkbox.checked && cellFound ){
      tdItems.removeAttribute('bgcolor');
    }


  }
}));

  function obterMarcados() 
  {
    var numeros = 0;
    var listaMarcados = document.getElementsByName("checkbox1");
    
    if (listaMarcados.length > 0)
    {
      for (loop = 0; loop < listaMarcados.length; loop++) 
      {   
        let item = listaMarcados[loop];
        console.log(item.checked)
        if (item.type == "checkbox" && item.checked) 
        {
          numeros++;
          alert(item.value);
          alert(listaMarcados.length);
        }
      } 
      if (numeros == 0)
      {
        alert("Nenhum CheckBox foi Marcado");
      }
      
    }
    else
    {
      alert("Nao existe nenhum CheckBox com esse nome(name)");
    }  
  }
</script>

<form>
  <table width="" border="1" cellspacing="10" cellpadding="4">
    <tr align="center"> <td>--</td> <td> --                                                                                                                            <br></td> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> <td>G</td> <td>H</td> <td>I</td> <td>J</td> <td>K</td> <td>L</td> <td>M</td> <td>N</td> <td>O</td> <td>P</td> <td>Q</td> <td>R</td> <td>S</td> <td>T</td> <td>U</td> <td>V</td> <td>X</td> </tr>  
    <tr align="center"> <td><input type="button" name="btn1" value="Filtrar" onclick=".obterMarcados()"> </td> <td> <input type="button" name="btn" value="Verificar Marcados" onclick="obterMarcados()">                                         <br></td> <td COLSPAN="12" align="center">RAIZES 8</td> <td COLSPAN="4" align="center">RAIZES 7</td> <td COLSPAN="2" align="center">RAIZES 6</td> <td td COLSPAN="3" align="center">VEREDAS 2</td> <td>CARANDÁ</td> <td>PALMAS</td>  </tr>  
    <tr align="center"> <td>--</td> <td> --                                                                                                                            <br></td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>1</td> <td>2</td> <td>1</td> <td>2</td> <td>3</td> <td>1</td> <td>1</td> </tr>  
    <tr align="center"> <td>01</td> <td align="left"> <input type="checkbox" id = "3DS Max"            name="checkbox1" value="3DS Max"           > 3DS Max            <br></td> <td bgcolor="green" id="A1">A1 </td> <td id="B1">B1</td> <td>C1</td> <td>D1</td> <td>E1</td> <td>F1</td> <td>G1</td> <td>H1</td> <td>I1</td> <td>J1</td> <td>K1</td> <td>L1</td> <td>M1</td> <td>N1</td> <td>O1</td> <td>P1</td> <td>Q1</td> <td>R1</td> <td>S1</td> <td>T1</td> <td>U1</td> <td>V1</td> <td>X1</td> </tr>  
    <tr align="center"> <td>02</td> <td align="left"> <input type="checkbox" id = "Adobe + Audacity"   name="checkbox1" value="Adobe + Audacity"  > Adobe + Audacity   <br></td> <td bgcolor="white" id="A2">A2 </td> <td>B2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr>  
    <tr align="center"> <td>03</td> <td align="left"> <input type="checkbox" id = "Anaconda Python 5"  name="checkbox1" value="Anaconda Python 5" > Anaconda Python 5  <br></td> <td bgcolor="white" id="A3">A3 </td> <td>B3</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr>  

 

  </table>
</form>

  </body>
</html>

Share this post


Link to post
Share on other sites

@joao.felipe Bom tarde!

 

Cara quando você for publica no fórum tenta usar a tag code, o código fica bem mais organizado.

 

Em relação ao código, eu notei que tem um erro no array mapCherbox, no primeiro object dentro do array o indece com o nome de alert está sem o dois pontos, e também tem um outro erro no atributo onclick dentro do elemento input com o nome de "btn1", você acabo deixando passar um ponto junto do nome da função que você ia chamar quando ocorresse aquele evento.

 

Eu adicionei um evento de verificação de load da págia no seu código também adicionei o charset UTF-8 no cabeçalho da página, assim você não vai ter problema com carácter especial.

 

Obs.. pra que um array com um object que só tem um método alert? 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Joao</title>
    </head>
    <body>
        <form onsubmit="return false">
            <table width="" border="1" cellspacing="10" cellpadding="4">
                <tr align="center"> <td>--</td> <td> --                                                                                                                            <br></td> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> <td>G</td> <td>H</td> <td>I</td> <td>J</td> <td>K</td> <td>L</td> <td>M</td> <td>N</td> <td>O</td> <td>P</td> <td>Q</td> <td>R</td> <td>S</td> <td>T</td> <td>U</td> <td>V</td> <td>X</td> </tr>  
                <tr align="center"> <td><input type="button" name="btn1" value="Filtrar" onclick="obterMarcados()"> </td> <td> <input type="button" name="btn" value="Verificar Marcados" onclick="obterMarcados()">                                         <br></td> <td COLSPAN="12" align="center">RAIZES 8</td> <td COLSPAN="4" align="center">RAIZES 7</td> <td COLSPAN="2" align="center">RAIZES 6</td> <td td COLSPAN="3" align="center">VEREDAS 2</td> <td>CARANDÁ</td> <td>PALMAS</td>  </tr>  
                <tr align="center"> <td>--</td> <td> --                                                                                                                            <br></td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>1</td> <td>2</td> <td>1</td> <td>2</td> <td>3</td> <td>1</td> <td>1</td> </tr>  
                <tr align="center"> <td>01</td> <td align="left"> <input type="checkbox" id = "3DS Max"            name="checkbox1" value="3DS Max"           > 3DS Max            <br></td> <td bgcolor="green" id="A1">A1 </td> <td id="B1">B1</td> <td>C1</td> <td>D1</td> <td>E1</td> <td>F1</td> <td>G1</td> <td>H1</td> <td>I1</td> <td>J1</td> <td>K1</td> <td>L1</td> <td>M1</td> <td>N1</td> <td>O1</td> <td>P1</td> <td>Q1</td> <td>R1</td> <td>S1</td> <td>T1</td> <td>U1</td> <td>V1</td> <td>X1</td> </tr>  
                <tr align="center"> <td>02</td> <td align="left"> <input type="checkbox" id = "Adobe + Audacity"   name="checkbox1" value="Adobe + Audacity"  > Adobe + Audacity   <br></td> <td bgcolor="white" id="A2">A2 </td> <td>B2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr>  
                <tr align="center"> <td>03</td> <td align="left"> <input type="checkbox" id = "Anaconda Python 5"  name="checkbox1" value="Anaconda Python 5" > Anaconda Python 5  <br></td> <td bgcolor="white" id="A3">A3 </td> <td>B3</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr>  
            </table>
        </form>
            <script>

                window.onload = function()
                {
                    mapCheckbox = [
                        {
                            alert : alert('funcao Mapeia Checkbox')      // checkbox que será clicado
                        },
                        {
                            checkboxId: '3DS Max',        // checkbox que será clicado
                            cells: ['B1', 'C1'],        // as células que serão pintadas
                            color: '#00ff55'            // a cor das células
                        },
                        {
                            checkboxId: 'Adobe + Audacity',
                            cells: ['A2', 'B3'],
                            color: '#7ddce4'
                        },
                        {
                            checkboxId: 'Anaconda Python 5',
                            cells: ['G1', 'H1'],
                            color: '#8e90c0'
                        },
                    ]
                    
                    // Percorre todos os checkbox com o atributo "name" igual a "checkbox1"
                    // E adiciona um ouvinte de clique em cada um (que executa a ação abaixo quando ocorre o clique)
                    document.querySelectorAll('input[name=checkbox1]').forEach(checkbox => checkbox.addEventListener("click", function()
                    {

                        // Atribui à variável as opções do checkbox clicado
                        const checkboxOptions =  mapCheckbox.find(items => items.checkboxId.trim() === checkbox.id.trim());
                        // Pega as células que serão pintadas ao clicar neste checkbox
                        const cells = checkboxOptions ? checkboxOptions.cells : null;
                        // Pega todos as tags "td"
                        const tdItems = document.getElementsByTagName('td');

                        // Percorre todas as tags "td" (células) para verificar se alguma corresponde à célula do checkbox clicado
                        for (let i = 0; i < tdItems.length; i++) 
                        {
                            const tdContent = tdItems.textContent.trim(); // Pega o texto da célula atual para verificar
                            const cellFound = cells && cells.findIndex(cell => cell === tdContent) > -1;    // Verifica se a célula atual está contida no mapCheckbox do checkbox clicado

                            // Se o checkbox está marcado e a célula foi encontrada
                            if (checkbox.checked && cellFound)
                            {
                            // Adiciona a cor predefinida
                            tdItems.setAttribute('bgcolor', checkboxOptions.color);
                            }
                            // Se o checkbox não estiver marcado e a célula atual (no loop) está contida no mapCheckbox do checkbox clicado
                            // Remove a cor
                            else if(!checkbox.checked && cellFound )
                            {
                            tdItems.removeAttribute('bgcolor');
                            }

                        }
                    }));
                }

                function obterMarcados() 
                {
                    var numeros = 0;
                    var listaMarcados = document.getElementsByName("checkbox1");
                    
                    if (listaMarcados.length > 0)
                    {
                    for (loop = 0; loop < listaMarcados.length; loop++) 
                    {   
                        let item = listaMarcados[loop];
                        console.log(item.checked)
                        if (item.type == "checkbox" && item.checked) 
                        {
                        numeros++;
                        alert(item.value);
                        alert(listaMarcados.length);
                        }
                    } 
                    if (numeros == 0)
                    {
                        alert("Nenhum CheckBox foi Marcado");
                    }
                    
                    }
                    else
                    {
                        alert("Nao existe nenhum CheckBox com esse nome(name)");
                    }  
                }
            </script>
    </body>
</html>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By eric.rmarques
      Eu precisava fazer o seguinte:
      Conforme a imagem, o meu botão cadastrar está desabilitado.
      Eu queria ao marcar o checkbox, que o botão fosse habilitado.
      Alguém pode me ajudar?
       
       
      <form method="POST" action="">
                  <label>Nome</label>
                  <input type="text" name="nome" placeholder="Digite o nome e o sobrenome"><br><br>
                  
                  <label>E-mail</label>
                  <input type="text" name="email" placeholder="Digite o seu e-mail"><br><br>
                  
                  <label>Usuário</label>
                  <input type="text" name="usuario" placeholder="Digite o usuário"><br><br>
                  
                  <label>Senha</label>
                  <input type="password" name="senha" placeholder="Digite a senha"><br><br>
                  
                  <input type="checkbox" name="aceito" value="on">Li e estou de Acordo.<br><br>
                  
                  <input type="submit" name="btnCadUsuario" value="Cadastrar" disabled><br><br>
                        
                  
                  Lembrou? <a href="login.php">Clique aqui</a> para logar!
              
              </form>

    • By PRWEB
      Boa tarde!!!
       
      Por favor como faço para marcar um checkbox e ai marca automaticamente um campo radio?
       
      Obrigado
    • By Articulando
      Galera, seguinte. Estou tentando criar um evento em javascript que funciona da seguinte maneira; existem 5 checkbox na tela, ao selecionar dois checkbox os outros irão travar e não permitir o clique, se o usuário clicar novamente retirando a seleção de algum dos que foi selecionado ele volta a habilitar. Até então o código funciona blz, porém agora eu preciso fazer com que os dois primeiros checkbox contém como um único clique, ou seja, são 2 checkbox para travar, porém se eu selecionar o primeiro e o segundo eles contam como um, então eu o usuário poderia realizar outro clique em algum checkbox e ficariam 3 checkbox selecionados, porém isso só se aplica aos dois primeiros checkbox, caso não sejam eles é apenas dois cliques, se eles forem clicados o usuário pode escolher mais uma opção.
       
      o código atual está assim:
       
      <script type="text/javascript">
                  (function(){
                      "use strict";
                      var marcados = 0;
                      var verifyCheckeds = function($checks) {
                          if( marcados>=2 ) {
                              loop($checks, function($element) {
                                  $element.disabled = $element.checked ? '' : 'disabled';
                              });
                          } else {
                              loop($checks, function($element) {
                                  $element.disabled = '';
                              });
                          }
                      };
                      var loop = function($elements, cb) {
                          var max = $elements.length;
                          while(max--) {
                              cb($elements[max]);
                          }
                      }
                      var count = function($element) {
                          return $element.checked ? marcados + 1 : marcados - 1;
                      }
                      window.onload = function(){
                          var $checks = document.querySelectorAll('input[type="checkbox"][name="modalidades[]"]');
                          loop($checks, function($element) {
                              $element.onclick = function(){
                                  marcados = count(this);
                                  verifyCheckeds($checks);
                              }
                              if($element.checked) marcados = marcados + 1;
                          });
                          verifyCheckeds($checks);
                      }
                  }());
              </script>
       
       
      Quem conseguir me ajudar eu agradeço, preciso muito desse código rodando. 
    • By joao.felipe
      Pessoal, boa noite,
       
      estou tentando fazer um checkbox colorir multiplas celulas de uma tabela. Ao selecionar o checkbox e clicar no onclick botao(filtrar) ou somente selecionando o checkbox, eu preciso colorir a celula de verde através de alguma propriedade. Ex: <td ID="A1" color"green" ></td> da  
       
      <!DOCTYPE html>
      <html>
      <body>
      <script>
        function obterMarcados() 
        {
          var numeros = 0;
          var listaMarcados = document.getElementsByName("checkbox1");
          
          if (listaMarcados.length > 0)
          {
            for (loop = 0; loop < listaMarcados.length; loop++) 
            {   
              let item = listaMarcados[loop];
              console.log(item.checked)
              if (item.type == "checkbox" && item.checked) 
              {
                numeros++;
                alert(item.value);
                alert(listaMarcados.length);
              }
            } 
            if (numeros == 0)
            {
              alert("Nenhum CheckBox foi Marcado");
            }
            
          }
          else
          {
            alert("Nao existe nenhum CheckBox com esse nome(name)");
          }  
        }
      </script>
       
      <form>
        <table width="" border="1" cellspacing="10" cellpadding="4">
       
      <tr align="center"> <td>--</td> <td> -- <br></td> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> <td>G</td> <td>H</td> <td>I</td> <td>J</td> <td>K</td> <td>L</td> <td>M</td> <td>N</td> <td>O</td> <td>P</td> <td>Q</td> <td>R</td> <td>S</td> <td>T</td> <td>U</td> <td>V</td> <td>X</td> </tr>
       
      <tr align="center"> <td>--</td> <td> <input type="button" name="btn" value="Verificar Marcados" onclick="obterMarcados()">                                         <br></td> <td COLSPAN="12" align="center">RAIZES 8</td> <td COLSPAN="4" align="center">RAIZES 7</td> <td COLSPAN="2" align="center">RAIZES 6</td> <td td COLSPAN="3" align="center">VEREDAS 2</td> <td>CARANDÁ</td> <td>PALMAS</td>  </tr>  
       
      <tr align="center"> <td>--</td> <td> --                                                                                                                            <br></td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>1</td> <td>2</td> <td>1</td> <td>2</td> <td>3</td> <td>1</td> <td>1</td> </tr>  
       
        <tr align="center"> <td>01</td> <td align="left"> <input type="checkbox" id = "3DS Max"            name="checkbox1" value="3DS Max"           > 3DS Max            <br></td> <td bgcolor="green" id="A1">A1 </td> <td id="B1">B1</td> <td>C1</td> <td>D1</td> <td>E1</td> <td>F1</td> <td>G1</td> <td>H1</td> <td>I1</td> <td>J1</td> <td>K1</td> <td>L1</td> <td>M1</td> <td>N1</td> <td>O1</td> <td>P1</td> <td>Q1</td> <td>R1</td> <td>S1</td> <td>T1</td> <td>U1</td> <td>V1</td> <td>X1</td> </tr>  
       
        <tr align="center"> <td>02</td> <td align="left"> <input type="checkbox" id = "Adobe + Audacity"   name="checkbox1" value="Adobe + Audacity"  > Adobe + Audacity   <br></td> <td bgcolor="white" id="A2">A2 </td> <td>B2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr>  
       
        <tr align="center"> <td>03</td> <td align="left"> <input type="checkbox" id = "Anaconda Python 5"  name="checkbox1" value="Anaconda Python 5" > Anaconda Python 5  <br></td> <td bgcolor="white" id="A3">A3 </td> <td>B3</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr>  
       
            </table>
          </form>
        </body>
      </html>
    • By joao.felipe
      AMIGOS, ESTOU TENTANDO APRENDER A LINGUAGEM, O CODIGO É SIMPLES. TENHO UM CHECKBOX e QUERO Verificar se ele se encontra Marcado. ESTOU USANDO O FOR E QUERO QUE O RESULTADO SEJA EXIBIDO EM UM ALERTA DIZENDO CHECK MARCADO OU CHECK DESMARCADO. SEGUE O CÓDIGO. NAO SEI ONDE COLOCAR O ELSE.
      <!DOCTYPE HTML> <html> <body> <script> <!-- ******************************************************************* --> function obterMarcados() { alert( 'Estamos dentro da função obter Marcados!' ); var listaMarcados = document.getElementsByName("checkbox1"); if (checkBox1.checked == true) { for (loop = 0; loop < listaMarcados.length; loop++) { var item = listaMarcados[loop]; if (item.type == "checkbox" && item.checked) { alert(item.value); alert(listaMarcados.length); } } } else alert("Nao existe CheckBox Marcado"); } <!-- else alert( 'Não existe CheckBoxMarcado!' ) ; --> <!-- ******************************************************************* --> alert( 'Hello, world 1!' ); </script> <p>...After the script.</p> <form> <input type="button" NAME="submit" value="Verificar Marcados" onclick="obterMarcados()"> <input type="checkbox" name="checkbox1" value="Autocad"> Autocad <br> </form> </body> </html>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.