[SOLUCIONADO] Seleccionar todos los checkbox y dar color al tr

Carlos1975 · #1 (**permalink**) 12/01/2015, 13:26

Hola a todos, de nuevo por estos foros, si es que no podemos pensar que nunca sabemos demasiado

Mi problema

es que quiero conseguir que al poner la opcion de seleccionar todos... se coloreen todos los tr que incluyen el checkbox seleccionado.

Dejo el codigo de mi script para ver si me podeis ayudar, busco la compatibilidad con todos los navegadores por lo menos con los principales. (IE, moz, crome)

ARCHIVO productos.php

<body> ......

Código PHP:

Ver original<?php 
 
$productos = mysql_query("SELECT * FROM tblproducts ORDER BY IdProducto ASC");
$totalRows = mysql_num_rows($productos);
 
?>

Código HTML:

Ver original<form name="select_form" id="select_form" method="POST" action="productos_delete.php">
 
<table cellpadding="0" cellspacing="0" border="0" class="display" id="productos">
    <thead>
        <tr>
            <td width="5%" rowspan="2">&nbsp;</td>
            <td width="10%" rowspan="2">Imagen</td>
    </tr>
    <tr>
            <th width="5%">ID</th>
            <th width="10%">Referencia</th>
            <th width="25%">Nombre Producto</th>
            <th width="10%">Precio</th>
            <th width="10%">Tipo IVA</th>
            <th width="10%">Cantidad</th>
            <td width="5%">Visible</td>
            <td width="10%">&nbsp;</td>
            <td width="10%">&nbsp;</td>
    </tr>
</thead>
<tbody>

Código PHP:

Ver original<?php 
 
// codigo introducido en el tr que quiero que se seleccione y se coloree
     
while($reg = mysql_fetch_array($productos)) {
    
echo '<tr class="selected" onclick="check_selected(this)" id="tr_selected">';
echo '<td align="center"><input type="checkbox" name="check[]" id="check" value="'.$reg['idProducto'].'" /></td>';
echo '<td align="center">'; 
echo MostrarImagenProducto($reg['idProducto']).'</td>';
echo '<td align="center">'.$reg['idProducto'].'</td>';
echo '<td align="center">'.$reg['strReferenciaProducto'].'</td>';
echo '<td align="left">'.$reg['strNombreProducto'].'</td>';
echo '<td align="center">'.$reg['dblPrecioProducto'].' €</td>';
echo '<td align="center">'.TextoTipoIVA($reg['intTipoIVA']).'</td>';
echo '<td align="center">'.$reg['intStock'].'</td>';
echo '<td align="center">'.ObtenerImagenEstado($reg['intEstadoProducto']).'</td>';
echo '<td align="center"><a class="edit" href="productos_edit.php?product='.$reg['idProducto'].'"></a></td>';
echo '<td align="center">'; 
echo '<select OnChange="if(this.options[1].selected) { DuplicateElement('.$reg['idProducto'].'); } 
                       if(this.options[2].selected) { DeleteElement('.$reg['idProducto'].'); }" >';
echo '<option></option>';
echo '<option>Duplicar</option>';
echo '<option>Eliminar</option>';
echo '</select>';
echo '</td></tr>';
                     
}
 
?>

Código HTML:

Ver original</tbody>
<tfoot>
        <tr>
            <th colspan="4" class="sel_check">
<select OnChange="if(this.options[1].selected) { SelectElements(); }
                 if(this.options[2].selected) { DeselectElements(); }
                                 if(this.options[3].selected) { DeleteElementsSelected(); }" id="select_id">
<option value="0" class="title">Acciones masivas</option>
<option value="1" class="img_sel">Seleccionar todos</option>
<option value="2" class="img_des">Deseleccionar todos</option>
<option value="3" class="img_del">Eliminar productos</option>
                </select>
            </th>
            <th colspan="7"></th>
        </tr>
    </tfoot>
 
</table>
 
</form>
  
</body>
</html>

Y las funciones javascript son las siguientes:
Todas funcionan corectamente pero no consigo darle color al tr donde esta el checkbox seleccionado.

ARCHIVO global_functions.js

Código Javascript:

Ver originalfunction check_selected(i) {
    ch = i.getElementsByTagName("input")[0];
    ch.checked =! ch.checked;
    if (ch.checked) {
        i.style.backgroundColor = "#ffc";
    } else {
        i.style.backgroundColor = "#fff";
    }
}
 
//------------------------------------------------------------------
//--------------------------------------------------- select options 
 
function SelectElements() {
    for (i = 0; i < document.select_form.elements.length; i++)
    if (document.select_form.elements[i].type == "checkbox") {
        document.select_form.elements[i].checked = true;
        document.select_form.select_id.value = 0;
    }
}
 
function DeselectElements() {
    for (i = 0; i < document.select_form.elements.length; i++)
    if (document.select_form.elements[i].type == "checkbox")        
        document.select_form.elements[i].checked = false;
        document.select_form.select_id.value = 0;
}
 
function DeleteElementsSelected() {
    var option = document.getElementById("select_form").check; 
    var cont = 0; 
    for (var x = 0; x < option.length; x++) {
        if (option[x].checked) {
        cont = cont + 1;
        }
    }
    if (cont == 0) {
        alert("No ha seleccionado ningun elemento")
        location.reload();
    } else {
        message = confirm("Seguro que desea eliminar los elementos seleccionados?")
        if (message != 0) {
            document.all["select_form"].submit();
        } else {
            document.select_form.select_id.value = 0;
            return;
        }
    }
}
 
function DuplicateElement(i) {
    message = confirm("Se duplicara todo el contenido de esta seleccion")
    if (message != 0) {
        window.location = "../admin/productos_duplicate.php?producto="+i+"";
    } else {
        location.reload();
    }
}
 
function DeleteElement(i) {
    message = confirm("Seguro que desea eliminar el elemento seleccionado?")
    if (message != 0) {
        window.location = "../admin/productos_delete.php?producto="+i+"";
    } else {
        location.reload();
    }
}

Seguro que es algo sencillisimo pero se me escapa.

Gracias

: porra:

Alexis88 · #2 (**permalink**) 12/01/2015, 14:21

¿Estás buscando colorear la fila en donde está el checkbox marcado? Entonces, hazlo así:

Código Javascript:

Ver originalvar checkGroup = document.getElementsByTagName("input"),
    total = checkGroup.length, i;
 
for (i = 0; i < total; i++){
    if (checkGroup[i].name == "check[]"){ //Para cada <input> con el nombre 'check[]'
        checkGroup[i].onchange = function(){ //Cuando cambie el estado del checkbox
            if (this.checked){ //Si está marcado
                this.parentNode.parentNode.style.background = "yellow"; //Fondo amarillo
            }
            else{ //Si no está marcado
                this.parentNode.parentNode.style.background = "white"; //Fondo blanco
            }
        };
    }
}

Pude haberlo hecho en menos líneas, pero así como está, es compatible hasta con IE6.

P.D.: Nunca asignes el mismo id a más de un elemento en el mismo documento. Recuerda que se trata de un valor único.

Saludos

Carlos1975 · #3 (**permalink**) 13/01/2015, 02:10

Gracias gracias

He modificado mis funciones y comprobado en varios navegadores y todo perfecto.

Dejo el resultado de las funciones modificadas por si valiesen a otros usuarios.

Código Javascript:

Ver originalfunction SelectElements() {
    var checkGroup = document.getElementsByTagName("input"),
        total = checkGroup.length, i;
     
    for (i = 0; i < total; i++) {
        if (checkGroup[i].name == "check[]") { 
            checkGroup[i].checked = 1; 
            checkGroup[i].parentNode.parentNode.style.background = "#ffc";
            document.select_form.select_id.value = 0;
        }
    }
}
 
function DeselectElements() {
    var checkGroup = document.getElementsByTagName("input"),
        total = checkGroup.length, i;
     
    for (i = 0; i < total; i++) {
        if (checkGroup[i].name == "check[]") { 
            checkGroup[i].checked = 0; 
            checkGroup[i].parentNode.parentNode.style.background = "#fff";
            document.select_form.select_id.value = 0;       
        }
    }
}

Gracias de nuevo fiera