[Resolvido] Checkbox selecionar outros checkbox

[UP Solutions 0]

Galera, sou programador php e estou em apuros com javascript

 

tenho uma tabela gerada por dados do mysql e em cada linha tenho um checkbox

nesta tabela consegui implementar algumas funcoes javascript, tipo

qdo passamos o mouse a linha muda de cor, quando clicamos na linha ela permanece a cor e marca o checkbox

qdo clicamos novamente na linha ela desmarca o checkbox e a cor da linha volta ao padrão e tambem uma funcao de validação..até aqui beleza

 

tenho tbem um checkbox no inicio da tabela q seleciona todos os outros q estao abaixo, isso funciona,

porém qdo uso o selecionar todos a cor dos checkbox selecionados naum muda..apenas seleciona o checkbox..

 

alguém pode me ajudar?

 

abaixo meu código, detalhe, está pagina eh incluida dentra da index.php

 

<?php
/* -----------------------------------------------------------------*/
/*              Sistema de Administração UP Solutions               */
/* -----------------------------------------------------------------*/
session_start();
    if ($_SESSION['autentica']==""){ //verifica se a sessao ainda existe
        header('location:'.$CFG->admin.'/login.php'); //se nao existe redireciona para a pagina de login
    }
?>
<script language=javascript type="text/javascript">
<!--
function CheckAll() {//esta funcao faz com q o primeiro checkbox selecione todos os outros
    for (var i=0;i<document.form1.elements.length;i++) {
        var x = document.form1.elements[i];
        x.checked = document.form1.selall.checked;
    }
}
//-->

function validaCheckbox(v)//esta funcao faz a validacao dos checkbox
{
    todos = document.getElementsByTagName('input');
    for(x = 0; x < todos.length; x++)
    {
        if (todos[x].checked)
        {
           return confirm('Deseja realmente excluir os registros selecionados?'); return false;
        }
    }
    alert("Nenhum registro foi selecionado!");
    return false;
}

function mudar_cor(linha)//esta funcao muda a cor da linha clicada e seleciona o checkbox
{
        var chk = linha.getElementsByTagName("input");

        chk[0].checked = !chk[0].checked;

        if(chk[0].checked)
        {
                linha.style.backgroundColor = "#c0c0c0";
        }
        else
        {
                linha.style.backgroundColor = "";
        }
}

function mudar_cor_chk(obj)//esta funcao faz com q selecione o checkbox ao clicar sobre ele
{
        var tab = document.getElementById("tab");

        obj.checked = !obj.checked;
}

function hoverEmu()
{
	/*
		aqui estou buscando pelo elemento que tenha o id "tblForm", ai dentro desse id
		vou buscar pela tagname "tr"
	*/
	var navItems = document.getElementById("tab").getElementsByTagName("tr");
	/*
		navItems.length esse é o total de "tr" encontradas dentro do id assim executo um for de varredura,
		para ver se o mouse está sobre aquela "tr" ou não
	*/
	for (var i=0; i<navItems.length; i++)
	{
		navItems[i].onmouseover=function() { this.className += "over"; } //Mouse sobre a "tr" adiciona a class over a essa "tr"
		navItems[i].onmouseout=function() { this.className = ""; }// Mouse fora da "tr" remove a class over da "tr"
	}

	/*
		a função é chamada desde o inicio do carremento pagina.
	*/
}
</script>
<div id="top"><img alt="" src="<?php echo $CFG->admin ?>/imagens/icones/page.png" width="48" height="48" /></div><h3 class="storytitle">Páginas</h3>
    <div class="storycontent">
        <h4>Listando todas as páginas</h4>
  <br />
    <?php  if(isset($_GET['apagado'])){ ?>
    <span class="cadastrado">Registros excluidos com sucesso! </span><br /><br /><br />
    <?php }?>
    <form name="form1" onSubmit="return validaCheckbox(this);" action="<?php echo $CFG->admin ?>/funcoes/&funcao=apagar_pagina" method="post">
        <table id="tab" width="100%" border="0" cellspacing="0" cellpadding="0">
  <thead>
  <tr class="titCol">
    <th style="width: 4%; text-align: center; border-right: none;"><input type=checkbox name="selall" onclick="CheckAll()"></th>
    <th style="width: 8%; text-align: center; border-right: none;"><a href="&order=id"><?php if ($_GET['order'] == "id"){ ?>Cód<img alt="" src="<?php echo $CFG->admin ?>/imagens/icones/sortup.gif" width="10" height="9" /><?php } else { echo "Cód"; }?></a></th>
    <th style="width: 82%; text-align: center; border-right: none;"><a href="&order=titulo"><?php if ($_GET['order'] == "titulo"){ ?>Título<img alt="" src="<?php echo $CFG->admin ?>/imagens/icones/sortup.gif" width="10" height="9" /><?php } else { echo "Título"; }?></a></th>
    <th class="divf" style="width: 6%; text-align: center;">Opções</th>
  </tr>
  <thead>
  <?php
  if ($_GET['order'] !=""){
    $order  = $_GET['order'];
  }
  else {
      $order = "id";
  }
$pagina = new Mysqlfunctions();
$sql    = ("SELECT * FROM up_paginas order by ".$order." asc");
$qry    = $pagina->runQuery($sql);
$cnt = 0;
while($dados = mysql_fetch_array($qry, MYSQL_ASSOC)){
    if ($a==1){
  ?>
      <tr id="linha1" bgcolor="#f5f5f5" onclick="mudar_cor(this)">
       <td align="center" class="color"><input type="checkbox" onclick="mudar_cor_chk(this);" name="check<?php echo $cnt?>" id="check<?php echo $cnt?>" value="<?php echo $dados['id'] ?>" /></td>
       <td align="center" class="color"><?php echo $dados['id'] ?></td>
       <td class="color"><?php echo $dados['titulo'] ?></td>
       <td align="center" class="nocolorf"><a title="Editar" href="<?php echo $CFG->admin."/editar_pagina/".$dados['id'] ?>"><img alt="" src="<?php echo $CFG->admin ?>/imagens/icones/edit.gif" width="16" height="16" /></a></td>
  </tr>
  <?php
    $a=0;
  }
  else{
  ?>
  <tr id="linha2" bgcolor="#fafafa" onclick="mudar_cor(this)">
        <td align="center"><input type="checkbox" onclick="mudar_cor_chk(this);" name="check<?php echo $cnt?>" id="check<?php echo $cnt?>" value="<?php echo $dados['id'] ?>" /></td>
        <td align="center"><?php echo $dados['id'] ?></td>
        <td><?php echo $dados['titulo'] ?></td>
        <td align="center" class="nocolorf"><a title="Editar" href="<?php echo $CFG->admin."/editar_pagina/".$dados['id'] ?>"><img alt="" src="<?php echo $CFG->admin ?>/imagens/icones/edit.gif" width="16" height="16" /></a></td>
  </tr>
  <?php
    $a=1;
    }
    $cnt = $cnt + 1;
  }
  ?>
</table>
    <br />
    <input type="hidden" id="totalCNT" name="totalCNT" value="<?php echo $cnt?>" />
    <input type="submit" value="Apagar selecionados" />
</form>
</div>
<div class="meta">
    <span>Número de registros encontrados: <?php echo $pagina->num_rows($sql) ?></span>
</div>

e o css para mudar a cor da linha quando o mouse esta sobre ela:

 

#linha1:hover, #linha1 .over {
    background:#c0c0c0;
}

#linha2:hover, #linha2 .over {
    background:#c0c0c0;
}

[William Bruno 1501]

porém qdo uso o selecionar todos a cor dos checkbox selecionados naum muda..apenas seleciona o checkbox..

 

então você precisa chamar a função:

 

mudar_cor(linha) dentro da CheckAll()

[UP Solutions 0]

ja tentei, porém não consegui..

como faço isso?

 

niguém pode me ajudar?

[UP Solutions 0]

quase 100 visualizações e ninguém me ajuda!!!

 

nenhum programador javascript consegue fazer isto?

 

realmente preciso terminar este código, do contrário não ficária insistindo...

[Francis Schiavo 1]

Como a sua função mudar_cor() já altera o estado do checkbox vove teria alguns problemas ao chamá-la na função CheckAll(), nesse caso ou você copia o código que muda a cor dentro da função CheckAll ou separa a função mudar_cor em 2: uma que troca o estado e uma que muda a cor.

 

Exemplo:

function CheckAll() {//esta funcao faz com q o primeiro checkbox selecione todos os outros
    for (var i=0;i<document.form1.elements.length;i++) {
        var x = document.form1.elements[i];
        x.checked = document.form1.selall.checked;
        // Adicionado a troca da cor
        if(x.checked)
        {
                x.style.backgroundColor = "#c0c0c0";
        }
        else
        {
                x.style.backgroundColor = "";
        }
    }
}

ou

 

  function muda_cor(Check) {
    Check.style.color = Check.checked ? "#c0c0c0" : "";
  }

  function muda_estado(Check) {
    Check.checked = !Check.checked;
    muda_cor(Check);
  }
  
  function checkAll() {
    Checks = document.getElementByTagName("input");
    for (i in Checks) {
      Check = Checks[i];
      Check.checked = document.form1.selall.checked;
      muda_cor(Check);
    }
  }

Desculpe, apenas depois do post percebi que você altera a cor da linha de uma tabela e não de um checkbox, estou com um pouco de pressa agora, assim que puder volto com a solução.

Mas tente mudar a cor da linha usando a propriedade checkbox.parentNode.parentNode do checkbox para pegar o elemento <tr>

[UP Solutions 0]

Francis

 

valeu por ajudar..

 

seguinte cara, com o primeiro exemplo seu, consegui algo q ja havia acontecido antes com minhas tentativas,

oq acontece, qdo clico no checkbox check all ele seleciona os outros e muda a cor do input q fica no final da página..

 

e com a propriedade checkbox.parentNode.parentNode em alguns exemplos q vi na net ele muda a cor da linha qdo clica, mais naum volta

a cor qdo desmarca o checkbox..

 

o q será q estou fazendo errado?

[Francis Schiavo 1]

Posta a parte do código usando o parentNode pra gente ver. Aí fica mais facil achar uma solução.

[UP Solutions 0]

mais n tentei mudar o meu código pra usar o checkbox.parentNode.parentNode

apenas pesquisei na Internet pra ver como funcionava, pois n sei como mudar

 

você pode me ajudar com isto?

[Francis Schiavo 1]

Segue um exemplo do uso de parentNode, qualquer dúvida sobre o funcionamento poste aqui.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      #testTable {
        width: 400px;
        border: #000000 1px solid;
        border-spacing: 0px;
        border-collapse: collapse;
      }

      #testTable > tbody > tr {
        border-top:#000000 1px solid;
      }
    </style>
    <script type="text/javascript">
      function changeStateAll(newState) {
        checkboxList = document.getElementById('testTable').getElementsByTagName('tbody')[0].getElementsByTagName('input');
        for (i in checkboxList)
          if (!checkboxList[i].checked == newState)
            checkboxList[i].click();
      }

      function changeColor(checkbox) {
        checkbox.parentNode.parentNode.style.backgroundColor = checkbox.checked ? '#DDFFDD' : '';
      }
    </script>
  </head>
  <body>
    <table id="testTable">
      <colgroup
        <col style="width:20px;" />
        <col />
      </colgroup>
      <thead>
        <tr>
          <td>
            <input type="checkbox" name="checkAll" id="checkAll" onclick="changeStateAll(this.checked);" />
          </td>
          <td>
            Selecionar todos
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="checkbox" name="chk1" onclick="changeColor(this);" />
          </td>
          <td>
            Teste 1
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="chk1" onclick="changeColor(this);" />
          </td>
          <td>
            Teste 1
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="chk1" onclick="changeColor(this);" />
          </td>
          <td>
            Teste 1
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

[Henrique Barcelos 290]

quase 100 visualizações e ninguém me ajuda!!!

 

nenhum programador javascript consegue fazer isto?

 

realmente preciso terminar este código, do contrário não ficária insistindo...

Cara, não é assim... fórum não é helpdesk...

 

Tenha paciência e suas dúvidas serão respondidas...

 

Sabe utilizar jQuery???

 

Ficaria bem fácil:

 

$(function(){
	$("input[type=checkbox]").click(function(){
 	$('tr:has(:checked)').css('background-color', '#CCC');
	});
});

Tá meio "geral", mas a lógica é essa, só alterar algumas coisas...

[UP Solutions 0]

Galera, agradeço pela ajuda de todos..

 

Francis esta funçao sua resolveu todos os meus problemas, valeu!!

 

 

function changeStateAll(newState) {
     checkboxList = document.getElementById('testTable').getElementsByTagName('tbody')[0].getElementsByTagName('input');
        for (i in checkboxList)
          if (!checkboxList[i].checked == newState)
}

[UP Solutions 0]

Galera, apareceu outro probleminha

 

esta funcao não funciona no internet explorer

 

function changeStateAll(newState) {
     checkboxList = document.getElementById('testTable').getElementsByTagName('tbody')[0].getElementsByTagName('input');
        for (i in checkboxList)
          if (!checkboxList[i].checked == newState)
}

sera que alguem sabe oq pode ser?

[Francis Schiavo 1]

Certifique-se que a sua tabela tenha um <tbody>, por ser uma recomendação W3C o Firefox adiciona automáticamente às tabelas. O IE não então você tem que colocar no HTML mesmo.

Verifique se a estrutura da sua tabela é parecida com essa:

 

<table>
  <tbody>
    <tr>
      <td></td>
    <tr>
  </tbody>
</table>

Isso foi o que eu pude imaginar de momento, se for outra coisa posta a estrutura da tabela para que possamos analisar.

[UP Solutions 0]

Certifique-se que a sua tabela tenha um <tbody>, por ser uma recomendação W3C o Firefox adiciona automáticamente às tabelas. O IE não então você tem que colocar no HTML mesmo.

Verifique se a estrutura da sua tabela é parecida com essa:

 

<table>
  <tbody>
    <tr>
      <td></td>
    <tr>
  </tbody>
</table>

Isso foi o que eu pude imaginar de momento, se for outra coisa posta a estrutura da tabela para que possamos analisar.

 

Então a tag <tbody> encontrase na tabela, porém nao funciona no IE

 

inclusive se você testar o código q você postou pra mim no IE vera q ele tbem naum funciona la..

 

caso precise eu posto novamente o meu aqui para você..

[UP Solutions 0]

Conseguiu encontrar alguma coisa sobre o assunto Francis??

[Francis Schiavo 1]

Segue abaixo novo exemplo um pouco mais elaborado. Testei no Firefox e IE 8.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <title>Checkbox checker</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      #testTable {
        width: 400px;
        border: #000000 1px solid;
        border-spacing: 0px;
        border-collapse: collapse;
      }

      #testTable > tbody > tr {
        border-top:#000000 1px solid;
      }
    </style>
    <script type="text/javascript">
      function findAncestorByTagName(node, tagName) {
        Parent = node.parentNode;
        if (Parent == null)
          return(false);
        return(tagName.toUpperCase() == Parent.tagName.toUpperCase() ? Parent : findAncestorByTagName(Parent, tagName));
      }

      function changeStateAll(newState) {
        inputList = document.getElementById('testTable').getElementsByTagName('tbody')[0].getElementsByTagName('input');
        for (i in inputList) {
          input = inputList[i];
          if (input.constructor == HTMLInputElement && input.getAttribute('type').toUpperCase() == 'CHECKBOX' && input.checked != newState) {
            input.click();
          }
        }
      }

      function changeColor(Checkbox) {
        findAncestorByTagName(Checkbox, 'tr').style.backgroundColor = Checkbox.checked ? '#DDFFDD' : '';
      }
    </script>
  </head>
  <body>
    <table id="testTable">
      <colgroup
        <col style="width:20px;" />
        <col />
      </colgroup>
      <thead>
        <tr>
          <td>
            <input type="checkbox" name="checkAll" id="checkAll" onclick="changeStateAll(this.checked);" />
          </td>
          <td>
            Selecionar todos
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="checkbox" name="chk1" onclick="changeColor(this);" />
          </td>
          <td>
            Teste 1
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="chk2" onclick="changeColor(this);" />
          </td>
          <td>
            Teste 1
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="chk3" onclick="changeColor(this);" />
          </td>
          <td>
            Teste 1
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

[UP Solutions 0]

Mais uma vez valeu pela ajuda Francis..

 

vio, uma outra duvida, sera q eh possivel q ao carregar a página a linha ja venha com a cor como se estivesse selecionada??

 

deixa eu explicar melhor, em uma página eu carrego os valores do banco de dados com um while e onde o valor esta marcado como sim, carrego a pagina

com o checkbox marcados usando if do php a a propriedade checked

 

entao teria como q nos check q carrega marcados ele carregar com a cor de selecão ja??

[Francis Schiavo 1]

Até da por javascript, mas ja que você está colocando checked="checked" pelo PHP, fica mais facil colocar tambem style="background-color:<sua cor>" em outro if do php ao gerar a tr.

[UP Solutions 0]

valeu ae Francis, como te falei ja havia tentado desta maneira, no proprio if do php mais tinha feito usando bgcolor

por isso naum tinha funcionado, mais usando style ficou beleza

 

 

abrass