复选框检查上的粗体文字

Question

I have a div with an h3 tag who's text I would like to bold when a checkbox is checked. I have seen solutions with labels but I don't believe it works in my case. Here's the code:

HTML:

<div class="imagecontainer">
  <div id="imagewrap" class="wrap">
    <img src="../images/travel.gif" id="img_prev" width="450" height="450" />
    <h3 class="desc">"Perfection is not attainable, but if we chase perfection we can catch excellence."</h3>
  </div>
</div>

<input id="boldCheckbox" type="checkbox" class="boldCheckbox"/>
<label id="label1">Bold</label>

To be clear, I would like the h3 text with class="desc" to be bold on check. Thanks!

Answer 1

You need a change handler for the input:

document.getElementById("boldCheckbox").onchange = function() {
    var h3 = document.getElementsByClassName("desc")[0];
    if (this.checked) {
        h3.style.fontWeight = "bold";
    } else {
        h3.style.fontWeight = "normal";
    }
}

Demo: http://jsfiddle.net/jvk3qpvp/1/

Answer 2

var btnBold = document.getElementById("boldCheckbox"),
    title   = document.querySelector("#imagewrap h3");

btnBold.addEventListener("change", function(){
   title.style.fontWeight = this.checked ? "bold" : "normal";
});

jsBin demo

Answer 3

If you're OK using jQuery... here's a quite simple example:

 $('#boldCheckbox').on('change', function() { $('#imagewrap h3').css({fontWeight: this.checked?'bold':'normal'}); }); 

 h3 { font-weight : normal} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="imagecontainer"> <div id="imagewrap" class="wrap"> <h3 class="desc">"Perfection is not attainable, but if we chase perfection we can catch excellence."</h3> </div> </div> <input id="boldCheckbox" type="checkbox" class="boldCheckbox" /> <label id="label1">Bold</label> 

Logically, if your h3 is already bold by default than simply inverse the logic:

this.checked? 'normal' : 'bold'

Answer 4

You can use JavaScript to look at the checkbox and if it's checked, make it bold (font weight 700) and not, don't make it bold. Keep in mind the below code will show the h3 bold on page load. I'm not sure how you want to handle that.

$('#boldCheckbox').on('change', function () {
    if ($('#boldCheckbox').is(":checked")) {
        $('h3').css('font-weight', '700');
    }
    else {
        $('h3').css('font-weight', '100');
    }
});

https://jsfiddle.net/kuwu6kog/

Answer 5

WORKING 100%

Use this code to make H3 BOLDER

HTML

<div class="imagecontainer">
          <div id="imagewrap" class="wrap">
              <img src="icons/frontstreet.png" id="img_prev" width="450" height="450" />
              <h3 class="desc">"Perfection is not attainable, but if we chase perfection we can catch excellence."</h3>
          </div>
      </div>

      <input id="boldCheckbox" onclick="makeH3Bold(this)" type="checkbox" class="boldCheckbox"/>

JAVASCRIPT:

function makeH3Bold(o){
if(o.checked){
    $('.desc').css('textShadow','#000000 1px 0px 0px');
}
else{
    $('.desc').css('textShadow','#FFFFFF 0px 0px 0px');
}}

Answer 6

You can add other class in your tag with bold style. Try this:

document.getElementById("boldCheckbox").onchange = function() {
    var imageWrap = document.getElementById("imagewrap");
    var h3 = imageWrap.getElementsByTagName("h3")[0];
    if (this.checked) {
        h3.className = "desc selectedH3";
    } else {
        h3.className = "desc";
    }
}

selectedH3 could be like:

.selectedH3 {
    font-weight: bold;
}

This add or remove the class selectedH3 from your h3 tag.