Make the text return to its original state once the checkbox has been marked

I'm a beginner in CSS and JavaScript, and I've been attempting to change the text appearance from bold to normal when a checkbox is clicked, but so far, I haven't been successful... Initially, the text includes some bold words, but after clicking it, the entire phrase should switch to font-weight: normal...

<FORM>

        <input type="checkbox" name="adresa1 onClick="GetBold(this);" id="mail1"> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb9a9f899e889abb9e838b9e9f928f9489d5989496">[email protected]</a> - <B>Subiectbold daca email necitit</B> - data primire <BR>  
        <input type="checkbox" name="adresa" > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d9dcd6caf3d4ded2dadf9dd0dcde">[email protected]</a> - <B>Subiectbold daca email necitit</B> - data primire </a><BR>
        <input type="checkbox" name="adresa" > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d2d7c1d6c0d2f3d6cbc3d6d7dac7dcc19dd0dcde">[email protected]</a> - <B>Subiectbold daca email necitit</B> - data primire <BR>

</FORM>

and although I have implemented the given function below, unfortunately, it's not functioning as intended:

<script>
function GetBold(current)
{
  var array = document.getElementById("mail1");

  for (var i = 0; i < array.length; i++)
  {
    array[i].style.fontWeight = 'normal';
   }

  current.style.fontWeight = 'bold';
 }
</script>
javascripthtmlcss

Answer №1

To achieve this effect, utilizing CSS is a simple solution by using the adjacent-sibling combinator (+) along with the :checked pseudo-class:

input[type=checkbox]:checked + b {
  font-weight: normal;
}


input[type=checkbox]:checked + b {
  font-weight: normal;
}
<FORM>

  <input type="checkbox" name="adresa1" id="mail1"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9b8bdabbcaab899bca1a9bcbdb0adb6abf7bab6b4">[email protected]</a> -
  <b>Subiectbold daca email necitit</b> - data primire
  <br />
  <input type="checkbox" name="adresa"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e14111b073e19131f1712501d1113">[email protected]</a> -
  <b>Subiectbold daca email necitit</b> - data primire
  <br />
  <input type="checkbox" name="adresa"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5d4d1c7d0c6d4f5d0cdc5d0d1dcc1dac79bd6dad8">[email protected]</a> -
  <b>Subiectbold daca email necitit</b> - data primire
  <br />

</FORM>

Furthermore, it is advisable to eliminate any unnecessary white spaces at the end of attribute values. This will streamline code readability and avoid complications, especially when it comes to matching elements based on their IDs.

For further information, refer to these resources:

Answer №2

If you're new to this, the first step is to try something like the code below:

<form>
    <input type="checkbox" name="adresa1" onClick="GetBold(this);" id="mail1"> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8c899f889e8cad88959d88898499829fc38e8280">[email protected]</a> - <label id="lbl1">Subiectbold daca email necitit</label> -data primire <BR> 
</form>


<script>
function GetBold(current)
{
var checkB= document.getElementById(current.id);
var labelText = document.getElementById("lbl1");

if(checkB.checked)
labelText.style.fontWeight = 'bold';
else
labelText.style.fontWeight = 'normal';
}
</script>

Once you grasp how this works, create two CSS classes for styling instead of using inline styles in HTML:

<style>
.normal{
font-weight:normal;
}
.bold{
font-weight:bold;
}
</style>

In your JavaScript, target all the elements you want to modify using getElementsByTagName:

function GetBold(current)
{
var checkB = document.getElementById(current.id);
var array = document.getElementsByTagName("label"); //get all label tags from html

for (var i = 0; i < array.length; i++)
{
array[i].className = "normal"; //changing class from css for all yours labels
}
}

Make sure the text you want to style is within a label tag:

<input type="checkbox" name="adresa1" onClick="GetBold(this);" id="mail1"> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3756534552445677524f4752535e4358451954585a">[email protected]</a> - <label class="bold">Subiectbold daca email necitit</label> - data primire <BR>  
<input type="checkbox" > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="acc6c3c9d5eccbc1cdc5c082cfc3c1">[email protected]</a> - <label class="bold">Subiectbold daca email necitit</label> - data primire <BR> 
<input type="checkbox" name="adresa"> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c3d382e392f3d1c39242c39383528332e723f3331">[email protected]</a> - <label class="bold">Subiectbold daca email necitit</label> - data primire <BR>

Remember to use the class name "bold" instead of inline styles to be dynamically changed by the JavaScript function mentioned above.

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

Troubleshooting problem with printing iframes on Firefox

When attempting to print an iframe with a large amount of data using the code below, I'm encountering an issue in Firefox where only the first page is printed. The rest of the pages are not being included in the printout. window.frames[frameID]. ...

javascriptjqueryhtmlasp.netiframe

Utilizing the navigator object in React Navigator and expo to enhance component functionality

My React Native application requires a redirection on a specific component. Within my main App.js component, I have the following code snippet: import React from "react"; import { Text } from "react-native"; import { createAppContainer } from "react-nav ...

javascriptreactjsreact-nativereact-navigation

How to retrieve a value from an Angular form control in an HTML file

I have a button that toggles between map view and list view <ion-content> <ion-segment #viewController (ionChange)="changeViewState($event)"> <ion-segment-button value="map"> <ion-label>Map</ion-label> & ...

javascripthtmlangulartypescriptionic4

Display the complete image once the loading process is finished on Angular 12

When retrieving image src via API from the server, I aim for the image to only be displayed once completely loaded. In the meantime, I would like a skeleton outline to be shown during the loading process (images are segmented into sections and the skeleton ...

javascriptangularimagelazy-loading

The batch request from localhost for the Google Calendar API has been rejected

When testing the Google Calendar API V3 by submitting a batch request from localhost, I am encountering the error message ""from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is ...

javascript

How do I combine Firefox binary specification with adding the Firebug extension when using Selenium?

Presently I am utilizing the code below. var co = require('co'); var WebDriver = require('selenium-webdriver'); var SeleniumServer = require('selenium-webdriver/remote').SeleniumServer; co(function *() { // async var ser ...

javascriptnode.jsseleniumselenium-webdriverfirebug

Implement a loop using $.each along with conditional statements utilizing if with $.getJSON

Struggling with the usage of $.each and unable to figure out how to properly print all the data from my JSON file. Additionally, I've encountered issues with the if statement as well - no matter what approach I take, I can't seem to get any data ...

javascriptjsonif-statementeachgetjson

How can I retrieve an array of collections from multiple parent documents in Firebase and pass them as props in Next.js?

I need to access all the collections within the documents stored in a collection named users. This is how I currently retrieve all the user information: export async function getServerSideProps() { const snapshot = await firebase .firestore() .collection ...

javascriptfirebasenext.js

Using XSL variables in JavaScript code

I've noticed that there have been similar questions asked, but none of the solutions seem to help in my case. So, I have this variable named 'var': <xsl:variable name="var"> val </xsl:variable> Now, I want to use it like thi ...

javascripthtmlxsltinnerhtmlxsl-variable

Sending data from Django's render() method to React.js

Currently, I'm working on a Django + React Application project where I am faced with the challenge of passing JSON data from Django's render() function to React.js. To achieve this, I initiate the rendering of an HTML page using Django, with the ...

javascriptjsonreactjsdjango

Creating a Venn diagram in an .html file with Flask: A tutorial

I am looking to display a Venn diagram on my HTML page using the return render function in Flask. Despite making several attempts, I have been unsuccessful so far. While matplotlib allows me to plot other types of graphs, I haven't discovered a metho ...

pythonhtmlpython-3.xflaskvenn-diagram

Creating dynamic form fields using AngularJS

I have a form that includes an input field, a checkbox, and two buttons - one for adding a new field and one for deleting a field. I want to remove the add button and instead show the next field when the checkbox is checked. How can I achieve this? angu ...

javascriptjqueryhtmlangularjs

The application is unable to recognize the CSS file

I am facing an issue where the design of my app is not displaying, even though the CSS file is located in the same folder. I'm unsure about what mistake I might have made! import React from 'react'; import classes from './Burger.css&ap ...

javascriptreactjs

Show and hide a div with the click of a button

As I embark on rebuilding a website from the ground up, I find myself pondering how to achieve a specific functionality: My goal is for another view to appear when one of two buttons is clicked. How can this be accomplished? I attempted the following app ...

jqueryhtmlcss

Adding new rows between existing rows in an HTML table using Jquery syntax

How can jQuery be used to insert rows between existing rows in an HTML table? <Table id="TEST"> <tr>1</tr> <tr>2</tr> </table> I need to include a new row <tr>xx</tr> between the rows with values ...

jqueryhtmlhtml-tablerow

Tips for adding a class to the output of a jQuery ajax request?

I've been searching for a solution to this issue without any luck. Below is the code I have: jQuery("#categories_parent_id").change(function() { id = jQuery("#categories_parent_id").val(); jQuery.ajax({ type: ...

phpjquerycssajax

Identifying Hashtags with Javascript

I am trying to identify hashtags (#example) in a string using javascript and convert them to <a href='#/tags/example'>example</a> Currently, I have this code: var text = '#hello This is an #example of some text'; text.r ...

javascriptregexangularjshashtag

Tips for accessing every "results" (parameters) from an API

Here is the response I received after making an API call in my attempt to retrieve each "bloc" result using a .forEach. const app = express(); const axios = require('axios') jobList = []; app.get('/getAPIResponse', function(req, res) ...

javascriptnode.jsexpress

Making the text gradually disappear at the bottom of a section using a see-through overlay, while ensuring the height remains within the boundaries of the section even

Trying to achieve a sleek fade-out effect at the end of a text section for a 'read more' indicator. I've been studying various tutorials, including this, and my current code is as follows: html <section> <p>Lorem ipsum dol ...

csshtmlfadefadeoutfadein

Tips on positioning items with a ChartBar using Chart.js alongside Alerts from Bootstrap 4

Greetings! I am facing a challenge with arranging a bar chart using Chart.js alongside bootstrap 4 alerts. The issue arises in the alignment of elements as depicted in this image: https://i.sstatic.net/4kDSo.png My goal is to position the alerts, located ...

c#htmlbootstrap-4chart.js