Checkbox

**antosto** · 08-10-2003, 17:34

Credo che un pò tutti conoscete l'interfaccia utente del servizio Hotmail; mi riferisco in particolare alla pagina Cartella Posta in Arrivo.
In corrispondenza di ogni e-mail arrivata c'è un checkbox che una volta selezionato, credo tramite uno javascript, ti evidenzia tutto il record.
Poi in alto c'è un altro checkbox che selezionandolo ti seleziona tutti gli altri checkbox che ti evidenziano i record.

Veniamo al dunque:
qualcuno sa dirmi come sono fatte queste funzioni????
ci sto provando da un sacco di tempo, ma non ci riesco.
qualcuno le ha pronte (o quasi)?????????

Grazie a tutti

Antonio

**Mich_** · 08-10-2003, 18:11

Fai una ricerca nel forum (bottone in alto a dx). Questo quesito ha gia` avuto risposta.

**antosto** · 08-10-2003, 18:21

ho cercato ma non sono riuscito a trovare, puoi mandarmi l'indirizzo

**Mich_** · 09-10-2003, 09:02

In effetti non lo ho trovato neppure io (eppure sono sicuro di averlo gia` visto).

Prova una cosa di questo tipo (da mettre in uno script nella head):

codice:

function checkall(ff) {
  for (var i=0; i<ff.elements.length; i++) {
    if (ff.elements[i].type=="checkbox") {
       ff.elements[i].checked = true;
    }
  }
}

function clearall(ff) {
  for (var i=0; i<ff.elements.length; i++) {
    if (ff.elements[i].type=="checkbox") {
       ff.elements[i].checked = false;
    }
  }
}

Poi nel form ci metti:
<input type="button" value="check all checkboxes" onClick="checkall(this.form);">

<input type="button" value="clear all checkboxes" onClick="clearall(this.form);">

Ciao
Michele

**antosto** · 09-10-2003, 09:48

Michele, le funzioni sono perfette, ho un'ultima domanda:
adesso come faccio a far "evidenziare" tutto il record quando si preme il relativo Checkbox????

**Mich_** · 09-10-2003, 09:50

La parola "record" fa pensare ad un database, ma sul client non si usano i database (andrebbero persi al cambio pagina).

Dovresti chiarire cosa intendi.

Ciao
Michele

**antosto** · 09-10-2003, 10:37

Con la parola record intendevo tutto il rigo in cui è inserito quel checkbox.

Immagina una tabella dove nella riga d'intestazione c'è un checkbox (chiamato A) e nelle righe per esempio 5 abbiamo 4 campi (checkbox B, cognome, nome e telefono).

Quando clicco su A: mi si attivano o disattivano tutti i B (e questo è quello che ho fatto grazie a te con le funzioni di prima)

Quando clicco su un B: in tutte le celle che compongono quella riga si mette come colore si sfongo il rosso, mentre normalmente il colore è il blu. Quando disattivo quel B i colori tornano al loro posto.

Spero di essere riuscito a farmi capire.

Grazie
Antonio

**Mich_** · 09-10-2003, 10:54

Attenzione.
In un form non ci possono essere dei campi di nome uguale;
in un documento non ci possono essere elementi con lo stesso id.

Modificare lo sfondo di una riga di tabella e` possibile, tramite i CSS:

document.getElementById('NOME').style.backgroundCo lor = "red";

Per informazioni piu` specifiche, dovresti postare un pezzetto di codice.

Ciao
Michele

**antosto** · 09-10-2003, 11:43

Originariamente inviato da Mich_
Attenzione.
In un form non ci possono essere dei campi di nome uguale;
in un documento non ci possono essere elementi con lo stesso id.

Modificare lo sfondo di una riga di tabella e` possibile, tramite i CSS:

document.getElementById('NOME').style.backgroundCo lor = "red";

Per informazioni piu` specifiche, dovresti postare un pezzetto di codice.

Ciao
Michele

Eccoti quello che ho fatto per adesso:

codice:

<html>

<head>
<title>Nuova pagina 1</title>
<script>
function test(cc,ff) {
    if (cc.checked!=true) 
      {clearall(ff)}
    else
      {checkall(ff)}
}

function checkall(ff) {
  for (var i=0; i<ff.elements.length; i++) {
    if (ff.elements[i].type=="checkbox" && ff.elements[i].name!="ALL") {
       ff.elements[i].checked = true;
    }
  }
}

function clearall(ff) {
  for (var i=0; i<ff.elements.length; i++) {
    if (ff.elements[i].type=="checkbox" && ff.elements[i].name!="ALL") {
       ff.elements[i].checked = false;
    }
  }
}
</script>
</head>

<body>

<form name="prova">
<input type="button" value="check all checkboxes" onClick="checkall(this.form);"> 
<input type="button" value="clear all checkboxes" onClick="clearall(this.form);"> 
<table border="0" cellpadding="0" cellspacing="0" width="50%">
  <tr>
    <td width="25%" bgcolor="#000080"><font color="#FFFFFF"><input type="checkbox" name="ALL" onClick="test(this,this.form);"></font></td>
    <td width="25%" bgcolor="#000080"><font color="#FFFFFF">Cognome</font></td>
    <td width="25%" bgcolor="#000080"><font color="#FFFFFF">Nome</font></td>
    <td width="25%" bgcolor="#000080"><font color="#FFFFFF">Cellulare</font></td>
  </tr>
  <tr>
    <td width="25%" bgcolor="#0099FF"><input type="checkbox" name="CB1"></td>
    <td width="25%" bgcolor="#0099FF">Pinco</td>
    <td width="25%" bgcolor="#0099FF">Pallino</td>
    <td width="25%" bgcolor="#0099FF">333/1234567</td>
  </tr>
  <tr>
    <td width="25%" bgcolor="#0099FF"><input type="checkbox" name="CB2"></td>
    <td width="25%" bgcolor="#0099FF">Tal</td>
    <td width="25%" bgcolor="#0099FF">De Tali</td>
    <td width="25%" bgcolor="#0099FF">333/1234567</td>
  </tr>
  <tr>
    <td width="25%" bgcolor="#0099FF"><input type="checkbox" name="CB3"></td>
    <td width="25%" bgcolor="#0099FF">Caio</td>
    <td width="25%" bgcolor="#0099FF">Sempronio</td>
    <td width="25%" bgcolor="#0099FF">333/1234567</td>
  </tr>
</table>
</form>

</body>

</html>

**Mich_** · 09-10-2003, 12:08

Non serve passare due parametri alla funzione test:

function test(cc) {
if (cc.checked) checkall(cc.form);
else clearall(cc.form);
}

Poi ti serrve una funzione che colora lo sfondo di una riga:

function colbg(rr,col) {
document.getElementById(rr).style.backgroundColor = col;
}

naturalmente devi passare il nome della riga, che dovrai settare nel codice HTML:

<td id="riga0">
<td style="width:25%; background-color:inherit; color:#ffffff; "><input type="checkbox" ....
...
</td>

Poi dovrai avere una funzione:
function decolrall() {
for(var i=0; i<4; i++) {
var nom = "riga"+i;
colbg(nom, "#000080");
}
}
ed una :
function colorthis(cc,rr) {
decolorall();
if(cc.checked) colbg(rr, "#800000");
}

Infine ti serve chiamare:
<input type="checkbox" name="CB1" onclick="colorthis(this,'riga1');"></td>

Gli elementi ci dovrebebro essere tutti, ma occorre un po' di accortezza per metterli insieme.

Ciao
Michele

Discussione: Checkbox

Strumenti discussione

Ricerca discussione

Visualizza

Checkbox

Permessi di invio