时间戳

首页 > 解决方案 > 复选框的 CSS 函数问题

jquery - 复选框的 CSS 函数问题

问题描述

我有一些在页面加载和用户单击复选框时执行的 CSS 代码。单击复选框时，该代码会隐藏表格的行，但标题除外。我有一些额外的代码可以在页面加载时隐藏这些行。我在这里的代码中有两个表，并且在页面加载时两个表都正确隐藏了。如果用户单击第一个表复选框，它会正确显示第一个表。在页面加载时也被隐藏（正确）的第二个表格无法通过单击其复选框来取消隐藏。然而，在我看来，两者的代码是正确的。

为什么不能根据复选框取消隐藏第二个表？

<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>

标签： jqueryhtmlcss

解决方案

您缺少$第 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>

推荐阅读