JavaScript：选中复选框并单击按钮时隐藏所有网格行答案

【问题标题】：JavaScript: To hide all grid rows when checkbox is checked and on button clickJavaScript：选中复选框并单击按钮时隐藏所有网格行
【发布时间】：2014-06-16 14:10:22
【问题描述】：

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

 <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) 改变隐藏行的元素modeflag[] value="D"

请帮忙。提前致谢。

【问题讨论】：

可以用jquery，还是只用纯js？

标签： javascript onclick hide tr

【解决方案1】：

使用 jquery 是这样的：

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

DEMO

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

【讨论】：

您好 webkit，它不工作。我需要包含任何 .js 文件吗？您还可以回答我的 #2 问题：“更改隐藏行的元素 modeflag[] value="D"”
您好 webkit，非常感谢。效果很好，我添加了 jquery-1.8.3.min.js 文件。您能否回答我的第 2 个问题：“更改隐藏行的元素 modeflag[] value="D"”
@PrakashRaj 你还需要关于#2 的帮助吗？