Cambiare colore di sfondo del div checkbox quando si fa clic

nofcfro

Cambiare colore di sfondo del div checkbox quando si fa clic

[LEFT]Ho un form con caselle di controllo diversi, come questo:[/LEFT]

[HTML]<div><input type='checkbox' name='groupid' value='1'>1</div>
<div><input type='checkbox' name='groupid' value='2'>2</div>
<div><input type='checkbox' name='groupid' value='3'>3</div>[/HTML]

[LEFT]Quello che sto cercando di fare è quando la casella è selezionata, cambiare il colore di sfondo del div, e quando è selezionata, rimuovere il colore di sfondo. Come posso fare questo usando jquery?Grazie :)[/LEFT]

nofcfro

Questo funziona, ma evidenzia in rosso solo la checkbox, mentre a me serve che evidenzi tutto il div!
[HTML]<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Prova</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<style type='text/css'></style>

</head>
<body>
<div><input type='checkbox' name='dd' value='1'>1</div>
<div><input type='checkbox' name='dr' value='2'>2</div>
<div><input type='checkbox' name='vf' value='3'>3</div>

</body>
</html>[/HTML]

ziobudda

Al div contenitore associa un id del tipo "div_cont_X" dove X è 1, 2 o 3. A questo punto basta che prendi il "value" del checkbox selezionato e ti ricrei l'id del DIV contenitore.

M.

nofcfro

Ciao,
grazie per il suggerimento
Ho quasi risolto ottenendo la colorazione di tutta la tabella (che nel mio caso coincideva col div), tuttavia non riesco a "spiegare" a javascript che quando deseleziono la checkbox la colorazione deve tornare predefinita (o bianca)

[HTML]<head runat="server"><style type="text/css">.style1{width: 100%;}</style><script language="javascript" type="text/javascript">var td = document.getElementsByTagName('td');
var changeStyle = function (element) {element.style.backgroundColor = '#339a7b';
}function ciao() {changeStyle(tabella);}
var restoreStyle = function (element) { element.style.backgroundColor = '#ffffff'; }
function ciao2() { restoreStyle(tabella); }
</script>
</head><body><form id="form1" runat="server"><div>
<table id="tabella" class="style1"><tr><td><input type="checkbox" name="checkbox" id="checkbox" onClick="ciao();" onUncheked="ciao2();" >
</td><td> </td></tr><tr><td> </td><td> </td></tr></table>
</div>
</body></html>[/HTML]

ziobudda

Ciao, usa una libreria/framework come jquery per fare queste cose. E' molto più semplice e molto più gestibile.

forum jquery com/topic/how-to-check-the-checkbox-is-checked-or-not-in-jquery

M.

nofcfro

Ok grazie
Ma che significa la tua ultima frase?

ziobudda

Ciao, è un url senza i punti separatori. FORUM PUNTO JQueRY PUNTO COM

M.

nofcfro

Sul web ho trovato questo, ma ironia della sorte fa la cosa inversa! se clicco sulla riga mi seleziona la checkbox!!

[HTML]
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8">
<title>Esempio jQuery checkbox</title>
<style type="text/css">tr.clic{background-color: #ff0000;}</style>
</head>
<body>
<table id="results">
<tr>
<td>Riga 1</td><td><input type="checkbox" name="riga1" /></td></tr>
<tr><td>Riga 2</td><td><input type="checkbox" name="riga2" /></td></tr>
<tr><td>Riga 3</td><td><input type="checkbox" name="riga3" /></td></tr>
<tr><td>Riga 4</td><td><input type="checkbox" name="riga4" /></td></tr>
<tr><td>Riga 5</td><td><input type="checkbox" name="riga5" /></td></tr>
<tr><td>Riga 6</td><td><input type="checkbox" name="riga6" /></td></tr>
<tr><td>Riga 7</td><td><input type="checkbox" name="riga7" /></td></tr>
<tr><td>Riga 8</td><td><input type="checkbox" name="riga8" /></td></tr>
<tr><td>Riga 9</td><td><input type="checkbox" name="riga9" /></td></tr>
<tr><td>Riga 10</td><td><input type="checkbox" name="riga10" /></td></tr>
</table>
[/HTML]


<script type="text/javascript" src="http // ajax googleapis com/ ajax/ libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$('table#results tr').click(
function(){
if( $(this).find('input[type=checkbox]').is(':checked') ){
$(this).removeClass('clic').find('input[type=checkbox]').attr('checked',false);
}else{
$(this).addClass('clic').find('input[type=checkbox]').attr('checked',true);
}
}
);
</script>

ziobudda

Ciao, stai sbagliando a dove metti in ascolto jQuery: non è il TR che viene "checkato", ma il campo input.
Aggiungi ad tutti gli input la classe "mioInput", poi in jquery qualche cosa simile a


$('.mioInput').click(function(e) {
if (!$(this).is(':checked')) {   //Questo controllo è volutamente errato perché altrimenti non funziona come dovrebbe a che mi ricordi
    /** qui nel caso il checkbox fosse checkato */
}
else {
  /** qui il codice per non ckecked 
}            
});

M.

nofcfro

Purtroppo javascript lo conosco quasi per nulla, ci vado per analogia a PHP ma con scarsi risultati.
Ho provato a mettere le condizioni su IF e ELSE ma nulla

Sul Web ho trovato anche una cosa che è molto simile, dovrei solo fargli capire che onClick mi colora la riga (e lo fa) poi (credo) onblur (cioè quando la deseleziono) torna il colore di sfondo. Mi mangio le mani perché a sapere la sintassi penso si risolveva in pochi minuti senza importunare il tuo tempo e la tua gentilezza

[HTML]<html>
<head>
<script type="text/javascript">
var selected = 0;
function selectLine(x){
var currRow = document.getElementById("row"+x);
if (selected != 0)
{
var selectedRow = document.getElementById("row"+selected);
selectedRow.style.backgroundColor='#ffffff';
}
currRow.style.backgroundColor='#cccccc';
selected = x;
}
</script>
</head>
<body>
<table border="1">
<tr id="row1">
<td width="20"><input type="checkbox" id="1" name="send" value="Invia" onclick="selectLine(this.id);" /></td>
<td width="666"> </td>
</tr>
<tr id="row2">
<td><input type="checkbox" id="2" name="send" value="Invia" onclick="selectLine(this.id);" /></td>
<td> </td>
</tr>
<tr id="row3">
<td><input type="checkbox" id="3" name="send" value="Invia" onclick="selectLine(this.id);" /></td>
<td> </td>
</tr>
</table>
</body>
</html>[/HTML]