2
votes

Comment puis-je transmettre plusieurs identifiants dans getElementById

J'ai une grande question, comment puis-je optimiser cela dans un seul script?

Cela entraîne l'activation ou la désactivation des trois éléments en fonction de la case à cocher.

<script type="text/javascript">
    let elements = document.querySelectorAll("[id^='active_']");

    for (const element of elements) {
        element.addEventListener('click', function(event) {
            let index = this.id.split('_')[1];

            document.getElementById(`gender_${index}`).disabled = this.checked;
            document.getElementById(`size_${index}`).disabled = this.checked;
            document.getElementById(`q_${index}`).disabled = this.checked;

            document.getElementById(`gender_${index}`).disabled = !this.checked;
            document.getElementById(`size_${index}`).disabled = !this.checked;
            document.getElementById(`q_${index}`).disabled = !this.checked;     
        });
    }
</script>

merci à @Nidhin Joseph

ceci est mon nouveau script

 <script type="text/javascript">
    document.getElementById('active_0').onchange = function() {
        document.getElementById('gender_0').disabled = this.checked;
        document.getElementById('size_0').disabled = this.checked;
        document.getElementById('q_0').disabled = this.checked;
    };
</script>   
<script type="text/javascript">
    document.getElementById('active_0').onchange = function() {
        document.getElementById('gender_0').disabled = !this.checked;
        document.getElementById('size_0').disabled = !this.checked;
        document.getElementById('q_0').disabled = !this.checked;
    };
</script>

--- this script repeats 6 times from active_0 to active_5---

 <script type="text/javascript">
    document.getElementById('active_5').onchange = function() {
        document.getElementById('gender_5').disabled = this.checked;
        document.getElementById('size_5').disabled = this.checked;
        document.getElementById('q_5').disabled = this.checked;
    };
</script>   
<script type="text/javascript">
    document.getElementById('active_5').onchange = function() {
        document.getElementById('gender_5').disabled = !this.checked;
        document.getElementById('size_5').disabled = !this.checked;
        document.getElementById('q_5').disabled = !this.checked;
    };
</script>

javascript jquery html

0 commentaires

3 Réponses :

0
votes

mettez une virgule (,) pour chaque sélecteur.

Essayez ceci:

<script type="text/javascript">
    document.getElementById('#active_5, #active_4, #active_3, #active_2, #active1').onchange = function() {
        document.getElementById('gender_5').disabled = this.checked;
        document.getElementById('size_5').disabled = this.checked;
        document.getElementById('q_5').disabled = this.checked;
    };
</script>

et n'oubliez pas d'ajouter le signe (#) avant le sélecteur. vous aide

0 commentaires

1
votes

getElementById a > est destiné à être utilisé lorsque vous souhaitez sélectionner un élément avec un élément particulier.

Pour votre cas d'utilisation, vous pouvez utiliser document.querySelectorAll

<div id='a'>a</div>
<div id='b'>b</div>
<div id='c'>c</div>
<div id='d'>d</div>

<button onclick="select()">Select by id's</button>

function select(){
  let elements = document.querySelectorAll("#a,#b,#c,#d")
  console.log(elements)
}

0 commentaires

0
votes

Vous pouvez utiliser querySelectorAll , puis attacher des événements de clic à toutes les divs dont l'ID correspond à active_ * . Dans l'événement de clic, vous pouvez utiliser la méthode split pour extraire la partie numérique, puis l'utiliser pour accéder à vos éléments dom.

<div id='active_0'>a</div>
<div id='active_1'>b</div>
<div id='active_2'>c</div>
<div id='active_3'>d</div>

div {
  margin-bottom: 1em;
}

let elements = document.querySelectorAll("[id^='active_']");

for (const element of elements) {
  element.addEventListener('click', function(event) {
    let index = this.id.split('_')[1];
    console.log(`gender_${index}`, `size_${index}`, `q_${index}`);
  });
}

0 commentaires