使用jquery，如何隐藏未检查的所有表行？

Question

我有一个带有一列复选框的html表。我有一个按钮（表示＆＃34;仅显示选定的行＆＃34;并且在按钮单击时我想隐藏未检查该行中的复选框的所有行

以下是我的html示例：

 <button id="mybutton">Show only Selected Rows</button>

<table>
      <tr>
          <td>test</td>
          <td><input class="test" type=checkbox value=100></td>
          <td><input class="test2" type=checkbox value=222></td>
       </tr>
      <tr>
          <td>test</td>
          <td><input class="test" type=checkbox value=100></td>
          <td><input class="test2" type=checkbox value=222></td>
       </tr>
</table>

我想让它动态地查看一列（不是硬编码）所以我可以说＆＃34;基于第二列或第三列过滤等等）

Answer 1

我认为你正在寻找这个......

＆＃13;

＆＃13;

$('#mybutton').click(function(){
$('table tr td:first-child :checkbox:not(:checked)').closest('tr').hide();
});

＆＃13;

* {margin: 0px; padding: 0px;}
body {background-color: rgb(248,248,248)}
#nav {
    list-style:none;
}
#nav li {
    float:left;
    display:block;
    width:100px;
    position:relative;
    z-index:500;
}
/* this is the parent menu */
 #nav li a {
    display:block;
    padding:15px;
    color:#000;
    border: 1px solid transparent;
}
#nav li a:hover {
    border: 1px solid black;
    
}
 #nav a.open {
    color:#fff;
    background-color: pink;
}
 #nav ul {
    position:absolute;
    display:none;
    padding:0;
    list-style:none;
}
#nav ul li {
    width:100px;
    float:left;
}
 #nav ul a {
    display:block;
    height:15px;
    padding: 15px;
    color:#666;
}
#nav ul a:hover {
    text-decoration:underline;
}
.active{
    background-color: pink;
    
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <button id="mybutton">Show only Selected Rows</button>
<table>
      <tr>
          <td><input class="test"  type=checkbox checked value=100></td>
          <td><input class="test2" type=checkbox checked value=222></td>
       </tr>
      <tr>
          <td><input class="test" type=checkbox   value=100></td>
          <td><input class="test2"  type=checkbox checked  value=222></td>
       </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用选择器:checkbox:not(:checked)定位所有未选中的复选框以及.closest('tr')以获取其父级tr：

$('table td:first-child :checkbox:not(:checked)').closest('tr').hide();

<强> Working Demo