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

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

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

Answer 2

一个选项如下：

// caching references to the various elements we'll
// re-use:
var on = $('#on'),
  off = $('#off'),
  all = $('#all'),
  table = $('table'),
  rows = table.find('tr'),
  inputs = table.find('input[type=checkbox]');

// binding the anonymous function as the event-handler
// for the click event:
on.click(function() {
  // hiding all <tr> elements:
  rows.hide();
  // filtering the collection of input elements of
  // type=checkbox, retaining only those that are
  // checked:
  inputs.filter(':checked')
    // finding the closest <tr> elements:
    .closest('tr')
    // and showing them:
    .show();
});

off.click(function() {
  rows.hide();
  // filtering the collection of <input> elements:
  inputs
    // retaining only those that are not checked:
    .filter(':not(":checked")')
    // finding the closest <tr> element:
    .closest('tr')
    // and showing them:
    .show();
});

all.click(function() {
  rows.show();
});

＆＃13;

＆＃13;

var on = $('#on'),
  off = $('#off'),
  all = $('#all'),
  table = $('table'),
  rows = table.find('tr'),
  inputs = table.find('input[type=checkbox]');

on.click(function() {
  rows.hide();
  inputs.filter(':checked').closest('tr').show();
});

off.click(function() {
  rows.hide();
  inputs.filter(':not(":checked")').closest('tr').show();
});

all.click(function() {
  rows.show();
});

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
  </tr>
  <tr>
    <td class="parent">
      <input type="checkbox" class="box">
      <label>Two</label>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="box">
      <label>Three</label>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;