当复选框被选中并单击按钮时隐藏所有网格行

JavaScript: To hide all grid rows when checkbox is checked and on button click

本文关键字：隐藏所 网格 按钮 单击 复选框      更新时间：2023-09-26

对于下面的代码，我需要您的专业知识。

 <html>
    <head>
    <script>
    function delrow() {
       document.getElementById("db_grid_row1").style.display = 'none';
       document.getElementById("db_grid_row2").style.display = 'none';
       document.getElementById("db_grid_row3").style.display = 'none';
       document.getElementById("db_grid_row4").style.display = 'none';
    }
    </script>
    </head>
    <body>
    <form action="rowhide_action.php" method="post" name="save_form">
    <input type="button" value="Delete" onClick="delrow();"></input>

    <table border="1">
    <thead>
    <tr>
    <th>#</th>
    <th>Databases</th>
    </tr>
    </thead>
    <tbody id="db_grid">
    <tr id="db_grid_row1">
    <td><input type="checkbox" name="cbox[]" value="1" ></input></td>
    <td><input type="text" name="db[]" value="Oracle"></input></td>
    <td><input type="hidden" name="modeflag[]" value="S" ></input></td>
    </tr>
    <tr id="db_grid_row2">
    <td><input type="checkbox" name="cbox[]" value="1"></input></td>
    <td><input type="text" name="db[]" value="MySQL"></input></td>
    <td><input type="hidden" name="modeflag[]" value="S"></input></td>
    </tr>
    <tr id="db_grid_row3">
    <td><input type="checkbox" name="cbox[]" value="1"></td>
    <td><input type="text" name="db[]" value="Cassandra"></input></td>
    <td><input type="hidden" name="modeflag[]" value="S"></input></td>
    </tr>
    <tr id="db_grid_row4">
    <td><input type="checkbox" name="cbox[]" value="1"></input></td>
    <td><input type="text" name="db[]" value="Mongo"> </input></td>
    <td><input type="hidden" name="modeflag[]" value="S"></input></td>
    </tr>
    </tbody>
    </table>
    </br>
    <input type="submit" value="Save"></input></br></br>
    </form>
    </body>
    </html>

当复选框被选中并单击删除按钮时，我想要(1)复选框行必须隐藏。(2)更改element modelflag [] value="D"为隐藏行

请帮助。

使用jquery，它是这样的:

$(function() {
     $("#del").on('click', delrow);
});
function delrow() {
    var checks = $( "input[type=checkbox]:checked" );
    checks.parent().parent().hide();
}

演示

注意，我从html元素中删除了事件到javascript..如果有任何问题请告诉我

相关文章：