How to Make Checkbox Text Bold in an HTML Table using CSS

I am looking to enhance the appearance of my table by changing the font style of a checkbox label to bold when the checkbox is checked.

In my current setup, I have implemented code that toggles the visibility of all table rows based on a header checkbox. Now, I want to take it a step further and highlight the text in the adjacent cell when an individual row's checkbox is clicked.

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

javascriptjqueryhtmlcsscss-tables

Answer №1

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

It could be beneficial to establish a CSS class that can be switched on and off in case an individual unchecks a checkbox.

Answer №2

To begin with, you must have a unique selector to manage event handling for all checkboxes.

In the provided code snippet, it's evident that in the first row (IQ/OQ/PQ), both id="boldCheckbox" and class="boldCheckbox" attributes are used, while the subsequent rows only contain name="DV".

Here are three suggested approaches:

  1. Modify the attributes of the <input> tags, assigning a common class (such as boldCheckbox used in the first row) - you can also use name, but it's recommended to reserve it for form submissions as a name/value pair. This method allows you to target the checkboxes using the selector $(".boldCheckbox");
  2. Keep the HTML structure unchanged but add an id to your table, like <table id="vvqtable"> and then utilize the selector 
    $("#vvqtable input[type='checkbox']")
    ;
  3. Apply the class AllValidationRows to all rows. The corresponding selector would be 
    $(".AllValidationRows input[type='checkbox']")
    .

Next, we need a function to make the second column appear bold. Here are two methods to achieve this:

  1. Utilize the css method to change the font-weight attribute to bold; or
  2. Create a CSS class containing font-weight: bold; and apply it using the toggleClass function.

For illustration purposes:

$(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>
    ...
    <!-- Additional rows truncated for brevity -->
    ...
</table>

Answer №3

There is a current Working Draft for the Selectors Level 4 specification that includes a :has() pseudoclass, allowing CSS-only implementation.

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

However, no browsers currently support this feature.

You can still achieve this with CSS alone if your <input> and <label> elements are within the same parent element.

input:checked + label {
    font-weight: bold;
}
<input type="checkbox" id="checkbox" /><label for="checkbox">Design Verification</label>

But if you need the <input> and <label> in separate <td> elements, a javascript solution would be necessary as suggested by other responses.

Answer №4

Give this a shot.

$(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 №5

Assign a class to your checkbox, for example "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");
    });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refresh webpage with updated title

I have hyperlinks to other sections within the same HTML document. When users click on these links, they open in a new tab. However, I want each new tab to have its own unique title. How can I achieve this without changing the title of the current tab? T ...

javascriptjqueryhtml

Automatically resize and vertically align a centrally positioned div in a designated container

I have a div container that is centered in the middle of another container. I managed to adjust it for one slide, but the issue arises when I create multiple .html files using the same css file - the height of the container does not meet my expectations. I ...

htmlcss

Toggle the visibility of a specific div based on the selection of the "other" radio button or checkbox

While my question may not be vastly different from others that have been asked before, it's the subtle nuances that are causing me some trouble. In essence, I am trying to toggle the visibility of a text input field used for specifying the "other" op ...

jquery

Animate movement in CSS3 by utilizing the CSS grid class to handle x and y coordinates

Currently, I have organized my tile elements in a grid using absolute positioning with classes like .row1, .col1... .row6, .col6. If I want to move a tile from .row6, .col6 to .row2, col2 using CSS3 GPU accelerated transitions and transformations Can you ...

csscss-transitionscss-transforms

JavaScript stylesheet library

What is the top choice for an open-source JavaScript CSS framework to use? ...

javascriptcssframeworks

Organizing information in local storage using an array and converting it to a string

After storing user inputs (Worker's name, Car Vin, Start time and End time) in the local storage, you want to sort the employees' names in alphabetical order. The question is where should the code be placed and how should it be written? // Car C ...

javascripthtmlarrayssortinglocal-storage

File not found - please check the required file paths

How do I resolve the address issue within the "require" function in my PHP code? I am receiving an error message that reads: Warning: require (..) failed to open stream: no such file or directory. https://i.sstatic.net/OQvQ6.jpg https://i.sstatic.net/pIR ...

javascriptphphtmlmysql

Can a child Div remove a section of the parent div's border?

Is it possible to use CSS alone to make a child div's border "override" or "remove" part of its parent's border? I want certain rows to have no border without changing the DOM structure. Keep in mind that the innerNoBorder div has no background ...

css

Assistance needed for upgrading database features

Currently, I'm developing a back-end feature for a client that involves the ability to add new records and modify existing ones using a simple interface. Despite making progress, I've hit a roadblock and realize my initial approach may not have b ...

phpjavascriptjquerymysqlcodeigniter

Navigation bar with dropdown functionality that adjusts its width based on the content inside

Need help with a CSS dropdown menu issue on my WordPress site. The contents of the submenus are too wide, even after setting a static width for them. I'm looking for a way to make the submenu width adjust dynamically based on the title length. Any exp ...

cssnavigation

Purpose of triggering another function during an ajax request

I have encountered an issue while working on a project. There is a page with an input field called balance within a div named balanceDiv. This field should not be visible to the admin, so I used ng-show to hide/show the div based on the user's login I ...

javascriptangularjsajaxasynchronoushttprequest

What is the best way to transfer Express.js variables to MongoDB operations?

I have been developing a blogging application using Express, EJS, and MongoDB. Feel free to check out the GitHub repository for more details. One of the features I've implemented is a simple pager for the posts within the application. Within the pos ...

javascriptnode.jsexpressejsmean-stack

Click event not functioning in programmatically loaded HTML

I am facing an issue with a JSON file that contains the page content I am trying to load. The link within it appears as follows: <a data-ng-click='foo()'>Bar</a> When I load this page content into the HTML page: <p class="body" ...

javascriptangularjs

Exploring case scenarios within a function reliant on the instanceof operator (JEST)

Encountering a problem while writing unit tests for a function with instance checks. The business logic is as follows: let status = new B(); const testFunction = () => { if (status instanceof A) { console.log('inside A') } else i ...

javascriptunit-testingjestjs

Passing data from child to parent in Angular using EventEmitter

I have integrated a child grid component into my Angular application's parent component, and I am facing an issue with emitting data from the child to the parent. Despite using event emitter to transmit the value to the parent, the variable containing ...

javascriptangulareventemitter

Adding a collection to an array in JavaScript

In my dynamic inputs, I am collecting a list of data like the following: FirstNames : Person1 FN, Person2 FN, Person3 FN, ... LastNames : Person1 LN, Person2 LN, Person3 LN, ... To retrieve these values, I use input names as shown below: var Fir ...

javascriptjqueryarrayslist

Strange behavior observed while attempting to create a smooth CSS transition effect from the right side

Is there a way to create a hover effect in my navbar where a line appears from the bottom left and top right, without causing any size or alignment issues with the links? * { margin : 0; padding: 0; } nav{ background-color: black; width: 1200px; he ...

htmlcss

Obtaining a string from the String prototype can be achieved by using

My goal is to create a custom log method for the String object that will print out the actual string value, but I'm facing some difficulties in getting it to work correctly. String.prototype.log = function() { console.log(this.valueOf()); } &apos ...

javascriptstringprototype

Guide on deleting an element from an object array based on the content of a specific field (resulting in undefined mapping)

I am working on integrating a task list feature using React. I have created a state to store the id and content of each task: this.state = {tasks: [{id: 123, content: 'Walk with dog'}, {id: 2, content: 'Do groceries'}]} Adding elements ...

javascriptreactjs

Node.JS is configured to hold onto localhost and will not release it

After successfully deploying one application built in Node locally, I am now facing an issue with another application. Whenever I try to start node (v5) with express (v4.13) on my localhost, it just hangs without establishing any connections. I am using a ...

javascriptnode.jsexpresslocalhost