javascript检查动态元素上的onchange函数

Question

I created an HTML array with some tr lines which need to be hidden by default and when user check the checkbox, the element is showed.

I have a Javascript function to show html element when checkbox is checked. It works but not when I use a loop.

I need that checkbox1 works on tr1, checkbox2 on tr2 ...

The PHP code which creates elements

<?php
if (isset($_SESSION['wordsListArray']))
{
    $length = count($_SESSION['wordsListArray']);
    for ($i = 0; $i < $length; $i++)
    {
        echo '<tr><td>' . htmlspecialchars($_SESSION['wordsListArray'][$i]) . '</td><td>' . htmlspecialchars($_SESSION['translationsListArray'][$i]) . '</td><td><input type="checkbox" id="checkboxId' . ($i+1) . '"/></td></tr>';
        echo '<tr class="trHide" id="trHide' . ($i+1) . '"><td><input type="text" placeholder=' . $_SESSION['personel_language_array'][0] . '></td><td><input type="text" name="other" placeholder=' . $_SESSION['personel_language_array'][1] . '></td><td><button type="submit">Edit</button><button type="submit">Erase</button></td></tr>';
    }
}
?>

This Javascript works but only on one element (getElementById is unique), but I need a loop to use different Id (trHide1, trHide2 ...)

var tr = document.getElementById("trHide1");
var check = document.getElementById("checkboxId1");
check.onchange = function() {
    if(check.checked)
    {
      tr.style.display = 'contents';
    }
    else
    {
      tr.style.display = 'none';
    }
};

I try this loop but it doesn't work.

for (var i = 1; i <= lengthWordList; i++)
{
    var trId = 'trHide' + i;
    var checkId = 'checkboxId' + i;
    var tr = document.getElementById(trId);
    var check = document.getElementById(checkId);
    check.onchange = function() {
        if(check.checked)
        {
            tr.style.display = 'contents';
        }
        else
        {
            tr.style.display = 'none';
        }
    };
}

Answer 1

Your code does not work because it overwrites the event and the selector

This could be worth it

var elemento=[];

    for (var i = 1; i <= 2; i++)
    {
        var trId = 'trHide' + i;
        var checkId = 'checkboxId' + i;
        console.log(trId);
        elemento.push(
            {
                tr:document.getElementById(trId),
                check:document.getElementById(checkId),
                event:function(){}
            }
        );
        console.log(elemento[(i-1)]);

        elemento[(i-1)].check.setAttribute('elemento',(i-1));

        elemento[(i-1)].event = elemento[(i-1)].check.onchange = function() {

            var valor = this.getAttribute('elemento');
            if(elemento[valor].check.checked)
            {
                elemento[valor].tr.style.display = 'contents';
            }
            else
            {
                elemento[valor].tr.style.display = 'none';
            }

        };

    }

 var elemento=[]; for (var i = 1; i <= 2; i++) { var trId = 'trHide' + i; var checkId = 'checkboxId' + i; console.log(trId); elemento.push( { tr:document.getElementById(trId), check:document.getElementById(checkId), event:function(){} } ); console.log(elemento[(i-1)]); elemento[(i-1)].check.setAttribute('elemento',(i-1)); elemento[(i-1)].event = elemento[(i-1)].check.onchange = function() { var valor = this.getAttribute('elemento'); if(elemento[valor].check.checked) { elemento[valor].tr.style.display = 'contents'; } else { elemento[valor].tr.style.display = 'none'; } }; } 

 <table> <tr id="trHide1" style="display:none"><td>AAAA</td></tr> <tr id="trHide2" style="display:none"><td>BBBB</td></tr> </table> <input type="checkbox" id="checkboxId1"> <input type="checkbox" id="checkboxId2">