Visualizzazione dei risultati da 1 a 4 su 4

Discussione: Checkbox in dropdown background color

  1. #1
    Utente di HTML.it
    Registrato dal
    Nov 2012
    Messaggi
    20

    Checkbox in dropdown background color

    Buongiorno a tutti. Ho necessità, per particolari motivi, di avere dei checkbox che si aprono a tendina. Dato che, in questo modo, la scelta effettuata rimane nascosta nella tendina e dato che le liste di checkbox come questa saranno molte, vorrei che, quando viene fatta una selezione in una determinata lista, l'azione venisse evidenziata in qualche modo, per esempio cambiando il colore di background della finestra principale "Quantità" (o in altro modo che potete suggerirmi), affinchè l'utente possa individuare, nella pagina, dove ha già effettuato le scelte. Spero di essermi spiegata. Grazie mille per l'aiuto.
    Il codice è questo:

    codice:
    <style>
    .chkdropdown {
        display:inline-block;
        position:relative;
        font-family:'arial', sans-serif;
        color:black;
    }
    .chkdropdown, .chkdropdown ul {
        border:1px solid #c6c4c4;
        background-color:whitesmoke;
        /*! padding: 0.1ex 0.5ex 0; */
        padding: 4px;
    }
    .chkdropdown ul {
        position:absolute;
        width:100%;
        list-style-type:none;
        padding:0;
        margin:0;
        left:0;
        height:0;
        overflow:hidden;
        border-color:transparent;
        background-clip:padding-box;
        z-index: 1;
    }
    .chkdropdown:hover ul {
        height:auto;
        border-color:#c6c4c4;
    }
    .chkdropdown li:nth-child(n+2) {
        border-top:1px solid silver;
    }
    .chkdropdown input[type="checkbox"] {
        /*! float:left; */
    }
    .chkdropdown label {
        /*! display:block; */
    }
    </style>
                      <table class="multi-checkbox">
                         <tr>
                            <td class="chkdropdown">
                               Quantit&agrave; &udarr; 
                               <ul style="z-index: 2">
                                  <li>
                                     <input type="checkbox" id="cdd1" value="Qty: 01;">
                                     <label for="cdd1">01</label>
                                  </li>
                                  <li>
                                     <input type="checkbox" id="cdd2" value="02">
                                     <label for="cdd2">02</label>
                                  </li>
                                  <li>
                                     <input type="checkbox" id="cdd3" value="03">
                                     <label for="cdd3">03</label>
                                  </li>
                                  <li>
                                     <input type="checkbox" id="cdd4" value="Quantit&agrave; desiderata:">
                                     <label for="cdd4">More</label>
                                  </li>
                               </ul>
                            </td>
                         </tr>
                      </table>

  2. #2
    Utente di HTML.it L'avatar di vic53
    Registrato dal
    Oct 2010
    residenza
    Fonte Nuova (Roma)
    Messaggi
    513
    ciao
    ti posto lo script modificato....verifica le correzioni da fare al tuo
    non mi funziona la routine di reset ckeched ci dovrei perdere altro tempo ma ora ho da fare
    quello che chiedi funziona..
    codice:
    <html>
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Quantità</title>
    
    
    <style>
    .chkdropdown {
        display:inline-block;
        position:relative;
        font-family:'arial', sans-serif;
        color:black;
    }
    .chkdropdown, .chkdropdown ul {
        border:1px solid #c6c4c4;
        background-color:whitesmoke;
        /*! padding: 0.1ex 0.5ex 0; */
        padding: 4px;
    }
    .chkdropdown ul {
        position:absolute;
      //  width:100%;
       width:80px;
        list-style-type:none;
        padding:0;
        margin:0;
        left:0;
        height:0;
        overflow:hidden;
        border-color:transparent;
        background-clip:padding-box;
        z-index: 1;
    }
    .chkdropdown:hover ul {
        height:auto;
        border-color:#c6c4c4;
    }
    .chkdropdown li:nth-child(n+2) {
        border-top:1px solid silver;
    }
    .chkdropdown input[type=checkbox] {
        /*! float:left; */
    }
    .chkdropdown label {
        /*! display:block; */
    }
    
    .multi-checkbox {
        border: 1px solid #00FFFF;
    }
    
    </style>
    
    </head>
    
    <body>
                      
                      <table class="multi-checkbox" id="pulsante" >
                         <tr>
                            <td class="chkdropdown" >
                               Quantit&agrave; &udarr; 
                               <ul style="z-index: 2">
                                  <li>
                                     <input type="checkbox" id="cdd1" name="cdd1" value="01" onclick="Seleziona('01')" checked="" >
                                     <label for="cdd1">01</label>
                                  </li>
                                  <li>
                                     <input type="checkbox" id="cdd2" name="cdd2" value="02" onclick="Seleziona('02')" checked="" >
                                     <label for="cdd2">02</label>
                                  </li>
                                  <li>
                                     <input type="checkbox" id="cdd3" name="cdd3" value="03" onclick="Seleziona('03')" checked="" >
                                     <label for="cdd3">03</label>
                                  </li>
                                  <li>
                                     <input type="checkbox" id="cdd4" name="cdd4" value="04" onclick="Seleziona('04')" checked="" >
                                     <label for="cdd4">More</label>
                                  </li>
                               </ul>
                            </td>
                         </tr>
                      </table>
    <script type="text/javascript" language="javascript">
    function Seleziona(valore){
     
     switch (valore) {
      case "01":
      if (cdd1.checked==true) {
        alert("1 ON");
        pulsante.style.backgroundColor="orange";
        ResetCK(valore);
        break;   
       };
       case "02":
      if (cdd2.checked==true) {
        alert("2 ON");
        pulsante.style.backgroundColor="green";    
      break; 
      };
      case "03":
      if (cdd3.checked==true) {
       alert("3 ON");
       pulsante.style.backgroundColor="blue";   
       break; 
       };
      case "04":
      if (cdd4.checked==true) {
       alert("MORE ON");
       pulsante.style.backgroundColor="red";  
      break; 
       };
      default:
      alert("ZERO checked");
      pulsante.style.backgroundColor="white";
      break; 
      };
    }
    function ResetCK(valore){
    if (valore!="01") {cdd1.checked=""};
    if (valore!="02") {cdd2.checked=""};
    if (valore!="03") {cdd3.checked=""};
    if (valore!="04") {cdd4.checked=""};
    } 
    </script>
                      
    </body>
    
    </html>
    Vic53

  3. #3
    Utente di HTML.it
    Registrato dal
    Nov 2012
    Messaggi
    20
    Grazie mille vic53. Vedo che le opzioni sono tutte selezionate di default all'accesso, forse e` questo che dici che non funziona. Se non hai tempo, pazienza, grazie lo stesso, in ogni caso e` una buona partenza. Sei stato gentile. Ciao
    Ultima modifica di Cosina; 05-11-2018 a 11:25

  4. #4
    Utente di HTML.it
    Registrato dal
    Nov 2012
    Messaggi
    20
    Il codice va benissimo e sono riuscita a sistemarlo come mi serve. Ora, se trovi tempo, oppure se qualcuno puo` aiutarmi al posto tuo, avrei bisogno di sapere se e come poter applicare la funzionalita` anche ad altre liste di checkbox (e sono molte) nella stessa pagina, considerando il problema degli id e senza dover scrivere codici infiniti. Non mi interessa che i colori siano diversi, ma e` indispensabile che ogni serie di checkbox sia indipendente dalle altre.

    Di nuovo grazie per il prezioso aiuto.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.