• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 276
  • Last Modified:

Change font using a checkbox

Hello,

I want to change the font to strong if the checkbox checked

<input type="checkbox" name="isDefaultTemplate" value="DefaultTemplate"  This a default template>    
0
usmbay
Asked:
usmbay
  • 3
  • 3
1 Solution
 
frinCommented:
This code will change whole document's font to bolder (strong) when checkbox is checked, or unchange if it's not checked:

<script>
function change(value) {
  if(value) document.body.style.fontWeight = 'bolder';
  else document.body.style.fontWeight = '';
}
</script>
<input type="checkbox" onchange="change(this.checked)" name="isDefaultTemplate" value="DefaultTemplate">  This a default template
0
 
usmbayAuthor Commented:
Thanks but I want it for this phrase only " This a default template "
0
 
frinCommented:
Oh okay, this then:

<script>
function change(value) {
  if(value) document.getElementById('content').style.fontWeight = 'bolder';
  else document.getElementById('content').style.fontWeight = '';
}
</script>
<input type="checkbox" onchange="change(this.checked)" name="isDefaultTemplate" value="DefaultTemplate">  <div id="content">This a default template</div>
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
usmbayAuthor Commented:
ok it changs the font but not dynamic, I mean I have to click on the text to be changed
0
 
frinCommented:
Yes you're right, IE being special again, it works fine in Firefox :)

Change "onchange" to "onclick". That should work in both IE and Firefox. Also if you wish to keep text next to the checkbox, use span instead of div. Will these changes it should look like this (I also added the normal):

<script>
function change(value) {
  if(value) document.getElementById('content').style.fontWeight = 'bolder';
  else document.getElementById('content').style.fontWeight = 'normal';
}
</script>
<input type="checkbox" onclick="change(this.checked)" name="isDefaultTemplate" value="DefaultTemplate">  <span id="content">This a default template</span>
0
 
usmbayAuthor Commented:
Excellent, Thanks
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now