使用HTML表中的CSS将复选框字体更改为粗体

Question

选中复选框后，我需要将表格中的复选框标签的字体更改为粗体。

我有一个内置的表格，并且如果未选中“标题”复选框，则有一些代码可以隐藏表格的所有行。 现在，我想单击每行中存在的复选框，并使下一个单元格中的文本字体变为粗体。

 $(document).ready(function() { $('#HideValidationRows').change(function() { if (!this.checked) $('.AllValidationRows').fadeIn(100); else $('.AllValidationRows').fadeOut(100); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table 900px="" border="1" style="width: 900px; height: 63px;"> <tbody> <tr style="height: 63px;"> <td style="height: 23px; background-color: #bdac73; width: 478px;" colspan="2"><span style="color: #000000;"> <strong> &nbsp; Verification, Validation &amp; Qualification</strong></span></td> <td style="width: 257px; background-color: #bdac73; text-align: center;"><input type="checkbox" id="HideValidationRows" /></td> </tr> <tr style="height: 22px;" class="AllValidationRows"> <td style="width: 40px; vertical-align: top; height: 22px;" td="">&nbsp; <input id="boldCheckbox" type="checkbox" class="boldCheckbox" /></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;" td="">&nbsp; <input name="DV" 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;" td="">&nbsp; <input name="DV" 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;" td="">&nbsp; <input name="DV" 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;" td="">&nbsp; <input name="DV" 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;" td="">&nbsp; <input name="DV" 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;" td="">&nbsp; <input name="DV" type="checkbox" /></td> <td style="width: 695px; height: 21px;" colspan="2">&nbsp;First Article Inspection Report</td> </tr> </tbody> </table> 

Answer 1

    $('input[name="DV"]').click(function () {
        $(this).closest('tr').css("font-weight","bold");
    });

您可能会考虑创建一个css类，如果有人取消选中此复选框，则可以对其进行切换。

Answer 2

尝试这个。

 $(document).ready(function() { $('#HideValidationRows').change(function() { if (!this.checked) $('.AllValidationRows').fadeIn(100); else $('.AllValidationRows').fadeOut(100); }); $("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","color":"black"}); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table 900px="" border="1" style="width: 900px; height: 63px;"> <tbody> <tr style="height: 63px;"> <td style="height: 23px; background-color: #bdac73; width: 478px;" colspan="2"><span style="color: #000000;"> <strong> &nbsp; Verification, Validation &amp; Qualification</strong></span></td> <td style="width: 257px; background-color: #bdac73; text-align: center;"><input type="checkbox" id="HideValidationRows" /></td> </tr> <tr style="height: 22px;" class="AllValidationRows"> <td style="width: 40px; vertical-align: top; height: 22px;" td="">&nbsp; <input id="boldCheckbox" type="checkbox" class="boldCheckbox" /></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;" td="">&nbsp; <input name="DV" 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;" td="">&nbsp; <input name="DV" 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;" td="">&nbsp; <input name="DV" 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;" td="">&nbsp; <input name="DV" 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;" td="">&nbsp; <input name="DV" 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;" td="">&nbsp; <input name="DV" type="checkbox" /></td> <td style="width: 695px; height: 21px;" colspan="2">&nbsp;First Article Inspection Report</td> </tr> </tbody> </table> 

Answer 3

首先，您需要定义一个可以处理所有复选框中的事件的选择器。

在您共享的代码中，我们可以看到在第一行（IQ / OQ / PQ）中，您具有id="boldCheckbox"和class="boldCheckbox" ，而在其他行中，您只有name="DV" 。

我建议三个选项：

1. 更改<input>属性，设置一个class （例如您已经在第一行中使用的boldCheckbox ）- 您也可以使用name ，但是我建议仅在表单提交中使用它，将其设置为名称/值对 。 在这种情况下，我们有选择器$(".boldCheckbox") ;
2. 进行任何更改，但我建议在此处向您的表添加一个id ，例如<table id="vvqtable">并使用选择器$("#vvqtable input[type='checkbox']") ；
3. 在所有行中使用类AllValidationRows 。 选择器： $(".AllValidationRows input[type='checkbox']") 。

---

现在，我们需要将第二列设置为bold的函数。 我们有两种方法：

1. 使用css并将属性font-weight更改为bold ； 要么
2. 创建一个具有font-weight: bold; CSS类font-weight: bold; 并使用toggleClass 。

---

一个例子：

 $(document).ready(function() { $('#HideValidationRows').change(function() { if (!this.checked) $('.AllValidationRows').fadeIn(100); else $('.AllValidationRows').fadeOut(100); }); $(".AllValidationRows input[type='checkbox']").click(function() { $(this).parent('td').next('td').toggleClass('bold'); }); }); 

 .bold { font-weight: bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table 900px="" border="1" style="width: 900px; height: 63px;"> <tbody> <tr style="height: 63px;"> <td style="height: 23px; background-color: #bdac73; width: 478px;" colspan="2"><span style="color: #000000;"> <strong> &nbsp; Verification, Validation &amp; Qualification</strong></span></td> <td style="width: 257px; background-color: #bdac73; text-align: center;"><input type="checkbox" id="HideValidationRows" /></td> </tr> <tr style="height: 22px;" class="AllValidationRows"> <td style="width: 40px; vertical-align: top; height: 22px;" td="">&nbsp; <input id="boldCheckbox" type="checkbox" class="boldCheckbox" /></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;" td="">&nbsp; <input name="DV" 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;" td="">&nbsp; <input name="DV" 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;" td="">&nbsp; <input name="DV" 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;" td="">&nbsp; <input name="DV" 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;" td="">&nbsp; <input name="DV" 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;" td="">&nbsp; <input name="DV" type="checkbox" /></td> <td style="width: 695px; height: 21px;" colspan="2">&nbsp;First Article Inspection Report</td> </tr> </tbody> </table> 

Answer 4

选择器第4级规范有一个工作草案 ，其中包括:has()伪类，该类允许您仅使用CSS进行此操作。

td:has(input:checked) + td label {
    font-weight: bold;
}

但是， 当前所有浏览器均不支持此功能。

只要<input>和<label>元素位于同一父元素中，您仍然可以使用仅CSS的解决方案来执行此操作。

 input:checked + label { font-weight: bold; } 

 <input type="checkbox" id="checkbox" /><label for="checkbox">Design Verification</label> 

但是现在，如果您想在不同的<td>元素中包含<input>和<label> ，那么您将需要其他答案建议的javascript解决方案。

Answer 5

给您的复选框一个类说check1

$(document).ready(function () {
    $('.check1').change(function () {
        if (this.checked) 
        $('table td:last-child').css("font-weight","700");
        else
        $('table td:last-child').css("font-weight","400");
    });
});