Как я могу передать несколько идентификаторов в getElementById

Question

У меня большой вопрос, как я могу оптимизировать это только одним скриптом?

Это приводит к включению или отключению всех трех элементов в зависимости от флажка.

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

thx@Nidhin Джозеф

это мой новый сценарий

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

Answer 1

getElementById предназначен для использования, если вы хотите выбрать один элемент с определенным.

Для вашего случая использования вы можете использовать document.querySelectorAll

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

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

Answer 2

Вы можете использовать querySelectorAll, а затем прикрепить события щелчка ко всем элементам с идентификатором, совпадающим с active_*.В событии click вы можете использовать метод split, чтобы извлечь числовую часть, а затем использовать для доступа к элементам dom.

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}`);
  });
}

div {
  margin-bottom: 1em;
}

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

Answer 3

ставьте запятую (,) для каждого селектора.

Попробуйте:

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

и не забудьте добавить знак (#), прежде чем селектор надеется, что это поможет вам