• User Attivo

    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]


  • User Attivo

    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>

    <script type='text/javascript'>//<![CDATA[
    $(window).load(function(){
    $(":checkbox").on("change", function() {
    var that = this;
    $(this).parent().css("background-color", function() {
    return that.checked ? "#ff0000" : ""; });});});//]]>
    </script>

    </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]


  • Super User

    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.


  • User Attivo

    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]


  • Super User

    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.


  • User Attivo

    Ok grazie 🙂
    Ma che significa la tua ultima frase?


  • Super User

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

    M.


  • User Attivo

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

    [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>
    
    

  • Super User

    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.


  • User Attivo

    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]