javascript - jQuery 显示选中或未选中的框

Question

我有一个表格，每行的第一列是一个复选框。表格上方是全部/打开/关闭选项，应根据复选框是否选中来显示表格的行。我需要这个来工作至少 10 行。 代码如下:

$(".parent").find("checkbox").each(function() {
	if ($(this).prop('checked')==true) { 
		var $on = $this;

	} else {
		var $off = $this;
	}

	$("#on").click(function() {
		$off.hide();
		$on.show();
	});
	
	$("#off").click(function() {
		$on.hide();
		$off.show();
	});
});

ul li { 
    float: left;
    text-decoration: none;
    display: inline-block;
    padding: 5px;
}

table {
    clear: both;
}

<ul>
    <li><a href="#" id="all" data-filter="all">All</a></li>
    <li><a href="#" id="on" data-filter="on">On</a></li>
    <li><a href="#" id="off" data-filter="off">Off</a></li>
</ul>

<table>
    <tr>
        <td class="parent">
            <input type="checkbox" class="box">
            <label>One</label>
        </td>
        <td>
          <p>Text</p>
        </td>
    </tr>
    <tr>
        <td class="parent">
            <input type="checkbox" class="box">
            <label>Two</label>
        </td>
        <td>
            <p>Text</p>
          </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="box">
            <label>Three</label>
        </td>
        <td>
            <p>Text</p>
          </td>
    </tr>
</table>

我对 jQuery 很陌生，所以任何东西都有帮助。谢谢。

Answer 1

检查这个JSFiddle

您可以通过 .has() 选择器选择包含选中复选框的所有 .parent 元素，如下所示:

$('.parent').has('input[type="checkbox"]:checked');