如何在勾选复选框时仅显示特定class的数据

你遇到的问题主要有几个关键点没处理到位，我帮你梳理并修正代码：

现有代码的问题 #

• JS中错误使用了$("#one")选择器，但目标元素是class为one的行，应该用.one类选择器而非#oneID选择器
• 没有处理class="two"的行的显示/隐藏逻辑
• 没有正确实现che()函数的完整逻辑，且初始状态需要确保所有行都显示
• 缺少jQuery的引入（如果你的项目里没引入的话，代码会直接失效）

修正后的完整代码 #

HTML部分 #

<html>
  <!-- 先引入jQuery，否则无法使用$语法 -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <input type="checkbox" name="checkbox" value="seperate" id="seperate" onchange="che()">
  <table border="1"> <!-- 添加border方便直观查看表格结构 -->
    <tr>
      <th>one</th>
      <th>one</th>
      <th>one</th>
      <th>one</th>
      <th>one</th>
    </tr>
    <tr class="one">
      <td>One</td>
      <td>One</td>
      <td>One</td>
      <td>One</td>
      <td>One</td>
    </tr>
    <tr class="two">
      <td>two</td>
      <td>two</td>
      <td>two</td>
      <td>two</td>
      <td>two</td>
    </tr>
    <tr class="one">
      <td>One</td>
      <td>One</td>
      <td>One</td>
      <td>One</td>
      <td>One</td>
    </tr>
  </table>
</html>

JavaScript部分 #

// 页面加载完成后确保初始状态显示所有行
$(document).ready(function() {
  $(".one, .two").show();
});

function che() {
  if($("#seperate").is(':checked')) {
    // 勾选时：显示class=one的行，隐藏class=two的行
    $(".one").show();
    $(".two").hide();
  } else {
    // 未勾选时：显示所有行
    $(".one, .two").show();
  }
}

关键修改说明 #

1. 引入jQuery：必须先引入jQuery库才能使用$相关语法，否则代码会报错无法运行
2. 修正选择器：把$("#one")改为$(".one")，匹配所有class为one的表格行
3. 完善逻辑：同时处理class=two的行，勾选时隐藏它们，未勾选时恢复显示所有行
4. 初始状态处理：通过$(document).ready()确保页面加载完成后，所有行默认处于显示状态

这样修改后就能完全实现你的需求：初始显示全部表格数据，勾选复选框时仅显示class为one的行。

内容的提问来源于stack exchange，提问作者chaitanya