Jump to content

Recommended Posts

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>

 

Share this post


Link to post
Share on other sites

@joao.felipe Bom dia, cara tem tanto erro no seu script que você precisa resolver eles antes de saber aonde colocar o else.

 

Uma coisa estranha e erada, é como você está colocando os comentários no javascript que é totalmente diferente dos cometário em html.

 

Para você entender melhor os comentários do javascript possuem duas fomas de serem adicionadas que são, o comentário de uma unica linha e  um bloco de comentário.

 

O comentário de uma unica linha em javascript começa // e qualquer texto entre // e o final da linha será ignorado pelo JavaScript (não será executado).

 

<script>
  
// alerta("Eu sou um comentário e eu não vou ser executado");
alerta("Eu não sou um comentário e vou ser executado");
  
</script>

 

O bloco de comentário começa com /* e termina com */ e qualquer texto entre /**/ será ignorado pelo JavaScript.

<script>
  
/* 
	alerta("nós somos um bloco de comentário e eu não vou ser executado");
	alerta("nós somos um bloco de comentário e eu não vou ser executado");
    alerta("nós somos um bloco de comentário e eu não vou ser executado");
    alerta("nós somos um bloco de comentário e eu não vou ser executado");
*/
  
alerta("Eu não sou um comentário e vou ser executado");
  
</script>

 

Outro erro que eu encontrei é que você não utiliza o retorno do método getElementsByName() e tenta acessar de uma forma erada, o método getElementsByName() vai sempre retorna uma lista(array) com todos os elementos com o nome(name) especificado ou ele retorna uma lista(array) vazio, o erro está no if, você tenta acessar a propriedade checked de um variável que não existe, e essa propriedade é de um elemento do type(checkbox), serial ideal você nesse if verificar se existe algum elemento destro dessa lista, para isso basta verificar a propriedade length.

 

Essa propriedade da lista(array) vai retorna o valor de quantos elementos a dentro dela, caso não haja nenhum elemento, ela retorna o valor 0.

 

if (listaMarcados.length > 0)
{

}

 

Vou deixa um código de exemplo de como ficária o código corrigido:

<!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>
  <p>...After the script.</p>

<form>
  <input type="button" name="btn" value="Verificar Marcados" onclick="obterMarcados()">
  <input type="checkbox" name="checkbox1" value="Autocad"> Autocad <br>
</form>

</body>
</html>

 

Também vou deixar um link de um ótimo site para aprender javascript

https://www.w3schools.com/js/default.asp

 

Share this post


Link to post
Share on other sites
5 horas atrás, gabrielms disse:

Excelente amigo, era exatamente o que eu preciso. Sou de Belo Horizonte e preciso de umas aulas em JS. conhece alguém que pode me dar umas aulas particulares?

 

Share this post


Link to post
Share on other sites

@joao.felipe Pó eu não conheço nenhum professor partícula de javascript, mas eu acho que não sera necessário um professor, já que o conteúdo dá W3 é muito completo, e também existe ótimos cursos de desenvolvimento web, de diversas plataformas online, dá uma olhada nos curso da udemy!

 

E caso você tenha alguma duvida, publica aqui no fórum do imaster ou no fórum clube do hardware, que eu te ajudo.

 

 

 

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 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 Henrique Augusto Rohloff
      Olá! Sou iniciante e estou treinando para configurar uma página de buscas de produtos em um banco de dados.
      Os produtos já estão sendo encontrados quando a palavra bate com os itens do banco. A conexão com o banco de dados está funcionando corretamente. Porém, quando nada é encontrado, queria que aparecesse uma mensagem "Nenhum resultado, tente novamente." Já tentei com  else de tudo que é jeito mas não aparece corretamente... Qual é o jeito certo?
       
      Segue o código:
       
       
    • By joao.felipe
      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>
    • 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>
×

Important Information

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