对于 table 中的每个复选框，如果选中复选框，则将 class 应用于 td 标记，

Question

我有一个 table，每行包含一个复选框。

选中复选框后，我想调用 JavaScript 函数。我想知道这是如何工作的，例如，如果我单击 table 第二行的复选框，它会调用 javascript 函数并将 class 应用于td 标签。

这是我的 table ...

     while ($row = $result->fetch_object()) {
                echo "<tr id='request-$row->ar_Id'>";
                echo "<td id='request-checked'><input type='checkbox'  id='chk-appRequest' onchange='flagRequestAsSelected()'></span></td>";
                echo '<td>' . $row->ar_Id . '</td>';
                echo '<td>' . $row->ar_patientId . '</td>';
                echo '<td>' . $row->pd_forename . ' ' . $row->pd_lastname . '</td>';
                echo '<td>' . $row->ar_appointmentTime . '</td>';
                echo '<td id="requestedDate">' . $row->ar_appointmentDate . '</td>';
                echo '<td>' . $row->ar_doctorId . '</td>';
                echo '<td id="alternativeAptTime" aria-hidden="true">' . $row->ar_alternativeTime . '</td>';
                echo '<td id="alternativeAptDate" aria-hidden="true">' . $row->ar_alternativeDate . '</td>';
                echo '<td id="alternativeAptDoctor" aria-hidden="true">' . $row->ar_alternativeDoctor . '</td>';
                echo '<td id="bookedBit" aria-hidden="true">' . $row->ar_booked . '</td>';
                echo '</tr>';
            }

JavaScript -

  function flagRequestAsSelected()
    {
        var table = document.getElementById("tbl-appointment-requests");
        for (var i = 0, row; row = table.rows[i]; i++) {
            for (var j = 0, col; col = row.cells[j]; j++) {

                'How to check if checkbox is checked???

                if (.checked == true)
                {
                    col.innerHTML = "BLAH";
                }
               }
            }
        }

Answer 1

你只是编辑你的问题，希望我的新答案对你有所帮助。

因此，将您的 html 更改为

<input type='checkbox'  id='chk-appRequest' onchange='flagRequestAsSelected(this)'> 
<!-- I added (this) inside your function parameters list -->

并编辑您的 JS

function flagRequestAsSelected(obj){ // I added obj param
    var table = document.getElementById("tbl-appointment-requests");
    for (var i = 0, row; row = table.rows[i]; i++) {
        for (var j = 0, col; col = row.cells[j]; j++) {

            //How to check if checkbox is checked???

            if (obj.checked == true){ // Check if the returned object is checked
                col.innerHTML = "BLAH";
            }
        }
    }
 }

旧答案：

使用 jQuery 你可以做到这一点

$(".myInputClass").on("change", function() { 
    console.log("this change!");
    if($(this).is(':checked')) {
        $(this).parent().addClass("myClass"); // Add class to the td parent
    }
}

对于 table 中的每个复选框，如果选中复选框，则将 class 应用于 td 标记，

for each checkbox in the table, if checkbox is selected, apply class to td tag,

html

javascript

iteration

jquery