Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
PESSOAL, AO MARCAR CHECKBOX OU CLICANDO NO BOTÃO GOSTARIA QUE A CÉLULA FOSSE SOMBREADA.
ex: quando eu marcar o checkbox 3ds MAX eu quero que a celula B1, C1 e D1 fique colorida como a celula A1
<!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>Ajuda?
joao.felipe
O que você quer esta nos códigos abaixo, mas você precisa adaptar dentro da sua página, pois existem muitas funções espalhadas e aparentemente alguns erros no seu código.
Copia e cola o código em um arquivo e teste.
Arquivo INDEX.HTML ou INDEX.PHP
*<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Valida Checkbox</title>
<script type="text/javascript">
function verificarCheckBox() {
if(document.getElementById('idT').checked){
document.getElementById('B1').style.backgroundColor ='#FF3300';
document.getElementById('C1').style.backgroundColor ='#00FF33';
document.getElementById('D1').style.backgroundColor ='#3300FF';
alert("Checkbox marcado");
} else {
document.getElementById('B1').style.backgroundColor = '';
document.getElementById('C1').style.backgroundColor = '';
document.getElementById('D1').style.backgroundColor = '';
alert("Checkbox desmarcado");
}
}
</script>
</head>
<body>
<input type='checkbox' id="idT" name="idk[]" value="1" onClick="verificarCheckBox()"> - Validar()
<table>
<tr><td id="B1" style="background-color:#FFFFFF"> <> B1 <> </td><tr>
<tr><td id="C1" style="background-color:#FFFFFF"> <> C1 <> </td><tr>
<tr><td id="D1" style="background-color:#FFFFFF"> <> D1 <> </td><tr>
</table>
</body>
</html>*
Você precisa colocar a função ***onClick="verificarCheckBox()" *** dentro do seu botão
***<input type="checkbox" id = "3DS Max" name="checkbox1" value="3DS Max"> 3DS Max***
Entenda que o código JavaScript passado acima pega o checkbox pelo **ID** e não pelo **NAME**, então o seu
***document.getElementById('idT').checked*** será ***document.getElementById('3DS Max').checked***
Espero ter ajudado
Att.
***Felipe Coutinho***>
13 minutos atrás, Felipe Guedes Coutinho disse:
joao.felipe
O que você quer esta nos códigos abaixo, mas você precisa adaptar dentro da sua página, pois existem muitas funções espalhadas e aparentemente alguns erros no seu código.
Copia e cola o código em um arquivo e teste.
Arquivo INDEX.HTML ou INDEX.PHP
*<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Valida Checkbox</title>
<script type="text/javascript">
function verificarCheckBox() {
if(document.getElementById('idT').checked){
document.getElementById('B1').style.backgroundColor ='#FF3300';
document.getElementById('C1').style.backgroundColor ='#00FF33';
document.getElementById('D1').style.backgroundColor ='#3300FF';
alert("Checkbox marcado");
} else {
document.getElementById('B1').style.backgroundColor = '';
document.getElementById('C1').style.backgroundColor = '';
document.getElementById('D1').style.backgroundColor = '';
alert("Checkbox desmarcado");
}
}
</script>
</head>
<body>
<input type='checkbox' id="idT" name="idk[]" value="1" onClick="verificarCheckBox()"> - Validar()
<table>
<tr><td id="B1" style="background-color:#FFFFFF"> <> B1 <> </td><tr>
<tr><td id="C1" style="background-color:#FFFFFF"> <> C1 <> </td><tr>
<tr><td id="D1" style="background-color:#FFFFFF"> <> D1 <> </td><tr>
</table>
</body>
</html>*
Você precisa colocar a função ***onClick="verificarCheckBox()" *** dentro do seu botão
***<input type="checkbox" id = "3DS Max" name="checkbox1" value="3DS Max"> 3DS Max***
Entenda que o código JavaScript passado acima pega o checkbox pelo **ID** e não pelo **NAME**, então o seu
***document.getElementById('idT').checked*** será ***document.getElementById('3DS Max').checked***
Espero ter ajudado
Att.
***Felipe Coutinho***
Excelente Felipe, era exatamente o que eu precisava. Agradeço muito a atençao. Obrigado!joao.felipe
Arrumei o seu código para fazer o que você pediu, agora você precisa montar as outras funções, marcando o CHECKBOX 3DS Max os "campos" B1, C1 e D1 são pintados de GREEN e ao desmarcar o CHECKBOX 3DS Max os "campos" B1, C1 e D1 voltam a ficar em BRANCO.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Valida Checkbox</title>
<script type="text/javascript">
function verificarCheckBox() {
if(document.getElementById('3DS Max').checked){
document.getElementById('B1').style.backgroundColor ='green';
document.getElementById('C1').style.backgroundColor ='green';
document.getElementById('D1').style.backgroundColor ='green';
} else {
document.getElementById('B1').style.backgroundColor = '';
document.getElementById('C1').style.backgroundColor = '';
document.getElementById('D1').style.backgroundColor = '';
}
}
</script>
</head>
<body>
<form onsubmit="return false">
<table width="" border="1" cellspacing="10" cellpadding="4">
<tr align="center"><td> -- </td>
<td> -- </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="04" align="center"> RAIZES 7 </td>
<td colspan="02" align="center"> RAIZES 6 </td>
<td colspan="03" align="center"> VEREDAS 2</td>
<td> CARANDÁ </td>
<td> PALMAS </td>
</tr>
<tr align="center"><td> -- </td>
<td> -- </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" onClick="verificarCheckBox()"> 3DS Max </td>
<td bgcolor="green" id="A1"> A1 </td>
<td bgcolor="white" id="B1"> B1 </td>
<td bgcolor="white" id="C1"> C1 </td>
<td bgcolor="white" id="D1"> D1 </td>
<td bgcolor="white" id="E1"> E1 </td>
<td bgcolor="white" id="F1"> F1 </td>
<td bgcolor="white" id="G1"> G1 </td>
<td bgcolor="white" id="H1"> H1 </td>
<td bgcolor="white" id="I1"> I1 </td>
<td bgcolor="white" id="J1"> J1 </td>
<td bgcolor="white" id="H1"> K1 </td>
<td bgcolor="white" id="L1"> L1 </td>
<td bgcolor="white" id="M1"> M1 </td>
<td bgcolor="white" id="N1"> N1 </td>
<td bgcolor="white" id="O1"> O1 </td>
<td bgcolor="white" id="P1"> P1 </td>
<td bgcolor="white" id="Q1"> Q1 </td>
<td bgcolor="white" id="R1"> R1 </td>
<td bgcolor="white" id="S1"> S1 </td>
<td bgcolor="white" id="T1"> T1 </td>
<td bgcolor="white" id="U1"> U1 </td>
<td bgcolor="white" id="V1"> V1 </td>
<td bgcolor="white" id="X1"> 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 </td>
<td bgcolor="white" id="A2"> A2 </td>
<td bgcolor="white" id="B2"> 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 </td>
<td bgcolor="white" id="A3"> A3 </td>
<td bgcolor="white" id="B3">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>
Espero ter ajudado.
Att.
***Felipe Coutinho***
>
Em 19/07/2019 at 09:26, joao.felipe disse:
PESSOAL, AO MARCAR CHECKBOX OU CLICANDO NO BOTÃO GOSTARIA QUE A CÉLULA FOSSE SOMBREADA.
ex: quando eu marcar o checkbox 3ds MAX eu quero que a celula B1, C1 e D1 fique colorida como a celula A1
<!DOCTYPE html>