Colore bordo container se checkbox checked

di
Cosina
il
2 risposte
Cosina
Cosina
Pochi posts
Iscritto da
dic, 2016
Messaggi:
28

Colore bordo container se checkbox checked

Buongiorno a tutti. Ho un form con diverse serie di checkbox contenuti in differenti div. Ho trovato uno script che cambia il colore del bordo del contenitore quando uno o piu` checkbox sono stati selezionati. Vorrei modificare lo script (o averne uno simile) affinche` possa funzionare in modo indipendente per differenti checkbox nello stesso form, e` possibile? Grazie mille per l'aiuto
Questo e` il codice:

<style>
.boxContent {  
  border:2px solid #ccc;	
}
.isChecked {
  border:2px solid blue;
}
</style>

<div class="boxContent">
<input type="checkbox" onclick="UpdateFeatures(this,false);"  >
<br>
<input type="checkbox" onclick="UpdateFeatures(this,false);">
</div>

<script>
function UpdateFeatures(checkbox) {
  console.log(document.querySelector(".boxContent"));
  document.querySelector(".boxContent").classList.remove("isChecked");
  if (checkbox.checked) {
    document.querySelector(".boxContent").classList.add("isChecked");
  }
}
</script>

2 Risposte

  • U
    ufollettu
    Pochi posts
    Iscritto da
    gen, 2019
    Messaggi:
    8

    Re: Colore bordo container se checkbox checked

    Prova così:
    
function UpdateFeatures(checkbox) {
  var nl = checkbox.parentNode.childNodes;
  var checked = 0;
  nl.forEach(function(node, index) {
    if (node.checked){
      checked++
    }
  })

  if (checkbox.checked) {
      checkbox.parentNode.classList.add("isChecked");
    } else if (!checkbox.checked && !checked){
      checkbox.parentNode.classList.remove("isChecked");    
    }    
}
  • Cosina
    Cosina
    Pochi posts
    Iscritto da
    dic, 2016
    Messaggi:
    28

    Re: Colore bordo container se checkbox checked

    Grazie mille e scusa per il ritardo,ma era passato molto tempo dalla domanda e ho visto solo ora, sei stato gentilissimo ed è esattamente quello che cercavo. Ciao
Devi accedere o registrarti per scrivere nel forum
2 risposte