jquery - 复选框的 CSS 函数问题

Question

我有一些 CSS 代码在页面加载时和用户单击复选框时执行。单击复选框时，代码会隐藏表的行(标题除外)。我有一些额外的代码可以在页面加载时隐藏这些行。我在此处的代码中有两个表，在页面加载时两个表都被正确隐藏。如果用户单击第一个表复选框，它会正确显示第一个表。在页面加载时也隐藏(正确)的第二个表不能通过单击其复选框来取消隐藏。然而，这两个代码在我看来是正确的。

为什么不能根据checkbox取消隐藏第二张表？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  $(document).ready(function() {
    $('#HideValidationRows').change(function() {
      if (!this.checked)
        $('.AllValidationRows').fadeOut(300);
      else
        $('.AllValidationRows').fadeIn(300);
    });
    $('#HideValidationRows').trigger('change');

    $("input[type='checkbox']").on('change', function() {
      if ($(this).is(':checked')) {
        $(this).parent('td').next('td').css("font-weight", "bold")(this).parent('td').next('td').css("color:", "red");

      } else {
        $(this).parent('td').next('td').css("font-weight", "normal");

      }
    });

  });
</script>
<table 900px="" border="1" style="width: 900px; height: 40px;">
  <tbody>
    <tr style="height: 40px;">
      <td style="width: 40px; background-color: #bdac73; text-align: center;"><input type="checkbox" id="HideValidationRows" /></td>
      <td style="height: 23px; background-color: #bdac73; width: 478px;" colspan="2"><span style="color: #000000;"> <strong> &nbsp; Verification, Validation &amp; Qualification</strong></span></td>
    </tr>
    <tr style="height: 22px;" class="AllValidationRows">
      <td style="width: 40px; vertical-align: top; height: 22px; text-align: center" td="">&nbsp; <input type="checkbox" /></td>
      <td style="width: 695px; height: 17px;" colspan="2">&nbsp;IQ/OQ/PQ</td>
    </tr>
    <tr style="height: 21px;" class="AllValidationRows">
      <td style="width: 40px; vertical-align: top; height: 22px; text-align: center;" td="">&nbsp; <input type="checkbox" /></td>
      <td style="width: 695px; height: 21px;" colspan="2">&nbsp;Design Verification</td>
    </tr>
    <tr style="height: 22px;" class="AllValidationRows">
      <td style="width: 40px; vertical-align: top; height: 22px; text-align: center;" td="">&nbsp; <input type="checkbox" /></td>
      <td style="width: 695px; height: 22px;" colspan="2">&nbsp;Design Validation</td>
    </tr>
    <tr style="height: 22px;" class="AllValidationRows">
      <td style="width: 40px; vertical-align: top; height: 21px; text-align: center;" td="">&nbsp; <input type="checkbox" /></td>
      <td style="width: 695px; height: 21px;" colspan="2">&nbsp;Process Validation</td>
    </tr>
    <tr style="height: 22px;" class="AllValidationRows">
      <td style="width: 40px; vertical-align: top; height: 22px; text-align: center;" td="">&nbsp; <input type="checkbox" /></td>
      <td style="width: 695px; height: 21px;" colspan="2">&nbsp;Labels Verification</td>
    </tr>
    <tr style="height: 22px;" class="AllValidationRows">
      <td style="width: 40px; vertical-align: top; height: 22px; text-align: center;" td="">&nbsp; <input type="checkbox" /></td>
      <td style="width: 695px; height: 21px;" colspan="2">&nbsp;Non-Current DPD Authority &amp; Derivative Dataset Archive</td>
    </tr>
    <tr style="height: 22px;" class="AllValidationRows">
      <td style="width: 40px; vertical-align: top; height: 22px; text-align: center;" td="">&nbsp; <input type="checkbox" /></td>
      <td style="width: 695px; height: 21px;" colspan="2">&nbsp;First Article Inspection Report</td>
    </tr>
  </tbody>
</table>
<p></p>
<!-- END VERIFICATION, VALIDATION & QUALIFICATION PARAMETERS SECTION OF ECN-->


<!-- BEGIN SUPPLIERS & MATERIAL OF THE ECN-->
<!-- THIS SECTION HAS THE SUPPLIERS & MATERIAL PARAMETERS OF THE ECN-->
<script>
  <!-- HIDES/SHOWS SUPPLIERS & MATERIAL SECTION OF THE ECN-->
  $(document).ready(function() {
    $('#HideAllSupplierRows').change(function() {
      if (!this.checked)
        $('.AllSupplierRows').fadeOut(300);
      else
        $('.AllSupplierRows').fadeIn(300);
    });
    $('#HideAllSupplierRows').trigger('change');
  });
</script>

<table border="1" style="width: 900px; height: 40px;">
  <tbody>
    <tr style="height: 20px;">
      <td style="width: 40px; background-color: #11d6d0; text-align: center;"><input type="checkbox" id="HideAllSupplierRows" /></td>
      <td style="height: 23px; background-color: #11d6d0;" width: 478px; colspan="2"><span style="color: #000000;"> <strong> Suppliers &amp; Material</strong></span></td>
    </tr>
    <tr style="height: 20px;" class="AllSupplierRows">
      <td style="width: 40px; vertical-align: top; height: 22px; text-align: center" td="">&nbsp; <input type="checkbox" /></td>
      <td style="width: 695px; height: 21px;" colspan="2">&nbsp;Lead Times / Material Planning</td>
    </tr>
    <tr style="height: 20px;" class="AllSupplierRows">
      <td style="width: 40px; vertical-align: top; height: 22px; text-align: center" td="">&nbsp; <input type="checkbox" /></td>
      <td style="width: 695px; height: 21px;" colspan="2">&nbsp;Order Parts</td>
    </tr>
    <tr style="height: 20px;" class="AllSupplierRows">
      <td style="width: 40px; vertical-align: top; height: 22px; text-align: center" td="">&nbsp; <input type="checkbox" /></td>
      <td style="width: 695px; height: 21px;" colspan="2">&nbsp;Supplier Qualifications</td>
    </tr>
  </tbody>
</table>

Answer 1

您在第 11 行缺少 $，即:

(this).parent('td').next('td').css("color:","red");

这是有效的 jsFiddle:https://jsfiddle.net/50pamhxr/2/

所以完整的第一个脚本应该是:

<script>
    $(document).ready(function() {
        $('#HideValidationRows').change(function() {
            if (!this.checked)
                $('.AllValidationRows').fadeOut(300);
            else
                $('.AllValidationRows').fadeIn(300);
        });
        $('#HideValidationRows').trigger('change');

        $("input[type='checkbox']").on('change', function() {
            if ($(this).is(':checked')) {
                $(this).parent('td').next('td').css({"font-weight": "bold", "color": "red"});
            } else {
                $(this).parent('td').next('td').css("font-weight", "normal");

            }
        });

    });
</script>