Change text to normal when checkbox is checked

Question

I am new to CSS and JavaScript and I've tried to change the text from a checkbox to normal when it's pressed, but I haven't succeded... In the beginning, the text contains some bolded words, but after it'll be clicked, all the phrase should be set to font-weight: normal...

<FORM>

        <input type="checkbox" name="adresa1 onClick="GetBold(this);" id="mail1"> adresa@expeditor.com - <B>Subiectbold daca email necitit</B> - data primire <BR>  
        <input type="checkbox" name="adresa" > joey@gmail.com - <B>Subiectbold daca email necitit</B> - data primire </a><BR>
        <input type="checkbox" name="adresa" > adresa@expeditor.com - <B>Subiectbold daca email necitit</B> - data primire <BR>

</FORM>

and I've used the following function, but it's not working:

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

Answer 1

You could easily use CSS for this, with the adjacent-sibling combinator ( + ), using 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">adresa@expeditor.com - <b>Subiectbold daca email necitit</b> - data primire <br /> <input type="checkbox" name="adresa">joey@gmail.com - <b>Subiectbold daca email necitit</b> - data primire <br /> <input type="checkbox" name="adresa">adresa@expeditor.com - <b>Subiectbold daca email necitit</b> - data primire <br /> </FORM> 

Also, remove the trailing white-space from your attribute-values; it serves no purpose and, in the case of an id , #elementID does not match <a id="elementID "> , which actively serves to complicate things.

References:

• Adjacent Sibling ( + ) combinator .
• Attribute-value ( [attribute=value] ) selectors .
• :checked .

Answer 2

Since you are a begginer as you said you first should try to do something like this:

<form>
        <input type="checkbox" name="adresa1" onClick="GetBold(this);" id="mail1"> adresa@expeditor.com - <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>

Then when you understand how that works create two classes in CSS because it's not good to decorate your text in html (using tag) better option will be to create two classes like this:

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

Then in javascript get all your elements that you want to change (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
   }
 }

All your text that you want to change should be in tag label:

<input type="checkbox" name="adresa1" onClick="GetBold(this);" id="mail1"> adresa@expeditor.com - <label class="bold">Subiectbold daca email necitit</label> - data primire <BR>  
    <input type="checkbox" > joey@gmail.com - <label class="bold">Subiectbold daca email necitit</label> - data primire <BR> 
    <input type="checkbox" name="adresa"> adresa@expeditor.com - <label class="bold">Subiectbold daca email necitit</label> - data primire <BR> 

Notice that there is class name "bold" instead of tag, that same class name will be changed in javascript function mentioned above