在选中的复选框上将字体粗细更改为粗体

Question

Doing some custom css on these input and label elements to style a checkbox. I'm trying to bold the font-weight when user clicks on the checkbox, and then toggle regular if they click again to toggle the box. Stumped on this, pun intended.

Fiddle

 $(function() { var action = 1; $('.control--checkbox input').on("click", goBold); function goBold() { if (action == 1) { fontWeight("bold"); action = 2; } else { fontWeight("400"); action = 1; } } function fontWeight(val) { $('.control--checkbox').css({ fontWeight: val }) } }); 

 .control-group { display: inline-block; vertical-align: top; } .control-group .control { display: block; position: relative; cursor: pointer; font-size: 18px; padding-left: 30px; margin: 15px 0; } .control-group .control input { position: absolute; z-index: -1; opacity: 0; } .control-group .control__indicator { position: absolute; top: 2px; left: 0; height: 20px; width: 20px; background: white; } .control-group .control--radio .control__indicator { border-radius: 50%; border: 1px solid #ccc; } .control-group .control:hover input~.control__indicator, .control-group .control input:focus~.control__indicator { background: #fff; } .control-group .control input:checked~.control__indicator { background: #fff; } .control-group .control__indicator:after { content: ''; position: absolute; display: none; } .control-group .control input:checked~.control__indicator:after { display: block; } .control-group .control--checkbox { font-weight: 400; font-size: 14px; } .control-group .control--radio .control__indicator:after { left: 4px; top: 4px; height: 10px; width: 10px; border-radius: 50%; background: green; } .control-group .control--checkbox .control__indicator:after { left: 6px; top: 0; width: 7px; height: 14px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .control-group .control--checkbox input:checked~.control__indicator { background-color: green; border: 1px solid green; } .control-group .control--checkbox input:disabled~.control__indicator:after { border-color: #7b7b7b; } .control-group .control--checkbox input:disabled~.control__indicator:after { border-color: #7b7b7b; } .control-group .control--checkbox .control__indicator { border: 1px solid #ccc; top: 0; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="facet-group"> <h3>Operating System</h3> <div class="control-group"> <label class="control control--checkbox">Apple iOS (42) <input type="checkbox" /> <div class="control__indicator"></div> </label> <label class="control control--checkbox">Android (20) <input type="checkbox" /> <div class="control__indicator"></div> </label> <label class="control control--checkbox">Windows (8) <input type="checkbox" /> <div class="control__indicator"></div> </label> </div> </div> 

Answer 1

Try this

$(function() {

   $('.control--checkbox input').on("change", function() {
    if ($(this).data('isbold')) {
      $(this).parent().css('font-weight', 'normal') 
      $(this).data('isbold', false)
    } else {
      $(this).parent().css('font-weight', 'bold')
      $(this).data('isbold', true)
    }
  });

});

Answer 2

The action checks are unnecessary. You can check if they are checked using event.target.checked which will return true or false values.

 $(function () { $('.control--checkbox input').on("change", goBold); function goBold(event) { if(event.target.checked) { fontWeight($(this), "bold"); } else { fontWeight($(this), "400"); } } function fontWeight(element, val) { element.parent().css({fontWeight: val}) } }); 

 .control-group { display: inline-block; vertical-align: top; } .control-group .control { display: block; position: relative; cursor: pointer; font-size: 18px; padding-left: 30px; margin: 15px 0; } .control-group .control input { position: absolute; z-index: -1; opacity: 0; } .control-group .control__indicator { position: absolute; top: 2px; left: 0; height: 20px; width: 20px; background: white; } .control-group .control--radio .control__indicator { border-radius: 50%; border: 1px solid #ccc; } .control-group .control:hover input ~ .control__indicator, .control-group .control input:focus ~ .control__indicator { background: #fff; } .control-group .control input:checked ~ .control__indicator { background: #fff; } .control-group .control__indicator:after { content: ''; position: absolute; display: none; } .control-group .control input:checked ~ .control__indicator:after { display: block; } .control-group .control--checkbox { font-weight: 400; font-size: 14px; } .control-group .control--radio .control__indicator:after { left: 4px; top: 4px; height: 10px; width: 10px; border-radius: 50%; background: green; } .control-group .control--checkbox .control__indicator:after { left: 6px; top: 0; width: 7px; height: 14px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .control-group .control--checkbox input:checked ~ .control__indicator { background-color: green; border: 1px solid green; } .control-group .control--checkbox input:disabled ~ .control__indicator:after { border-color: #7b7b7b; } .control-group .control--checkbox input:disabled ~ .control__indicator:after { border-color: #7b7b7b; } .control-group .control--checkbox .control__indicator { border: 1px solid #ccc; top: 0; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="facet-group"> <h3>Operating System</h3> <div class="control-group"> <label class="control control--checkbox">Apple iOS (42) <input type="checkbox" /> <div class="control__indicator"></div> </label> <label class="control control--checkbox">Android (20) <input type="checkbox" /> <div class="control__indicator"></div> </label> <label class="control control--checkbox">Windows (8) <input type="checkbox" /> <div class="control__indicator"></div> </label> </div> </div> 

Note: This can also be done in pure CSS.

Answer 3

You can get the same results by using CSS, no JS/jQ required.

Demo

 fieldset { box-shadow: 4px 4px 3px 2px rgba(0, 0, 0, 0.3); padding: 0 0 0 25px } legend { font-family: Verdana; font-size: 36px; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6); } .chx { display: none } label { display: block; font-family: 'Arial'; font-size: 32px; font-weight: 400; margin: 10px 0 0 0; text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6); } .chx:checked+label { font-weight: 900 } .chx+label b { display: inline-block; width: 18px; height: 18px; box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.4); } .chx:checked+label b { background: forestgreen; } .chx:checked+label b::before { display: block; content: '✔'; font-family: 'Arial Black'; font-size: 32px; font-weight: 900; margin-top: -20px; } 

 <fieldset> <legend>Operating Systems</legend> <input id='chx0' class='chx' type='checkbox'> <label for='chx0'><b></b> Apple iOS(42)</label><br> <input id='chx1' class='chx' type='checkbox'> <label for='chx1'><b></b> Android(20)</label><br> <input id='chx2' class='chx' type='checkbox'> <label for='chx2'><b></b> Windows(8)</label><br> </fieldset> 

Answer 4

Try to use this.checked to check its value...if checked set font-weight:bold using css() jQuery

 $(".control--checkbox input").on("change", function() { var font = this.checked === true ? "bold" : "normal"; $(this).closest(".control--checkbox").css("font-weight", font); }) 

 .control-group { display: inline-block; vertical-align: top; } .control-group .control { display: block; position: relative; cursor: pointer; font-size: 18px; padding-left: 30px; margin: 15px 0; } .control-group .control input { position: absolute; z-index: -1; opacity: 0; } .control-group .control__indicator { position: absolute; top: 2px; left: 0; height: 20px; width: 20px; background: white; } .control-group .control--radio .control__indicator { border-radius: 50%; border: 1px solid #ccc; } .control-group .control:hover input~.control__indicator, .control-group .control input:focus~.control__indicator { background: #fff; } .control-group .control input:checked~.control__indicator { background: #fff; } .control-group .control__indicator:after { content: ''; position: absolute; display: none; } .control-group .control input:checked~.control__indicator:after { display: block; } .control-group .control--checkbox { font-weight: 400; font-size: 14px; } .control-group .control--radio .control__indicator:after { left: 4px; top: 4px; height: 10px; width: 10px; border-radius: 50%; background: green; } .control-group .control--checkbox .control__indicator:after { left: 6px; top: 0; width: 7px; height: 14px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .control-group .control--checkbox input:checked~.control__indicator { background-color: green; border: 1px solid green; } .control-group .control--checkbox input:disabled~.control__indicator:after { border-color: #7b7b7b; } .control-group .control--checkbox input:disabled~.control__indicator:after { border-color: #7b7b7b; } .control-group .control--checkbox .control__indicator { border: 1px solid #ccc; top: 0; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="facet-group"> <h3>Operating System</h3> <div class="control-group"> <label class="control control--checkbox">Apple iOS (42) <input type="checkbox" /> <div class="control__indicator"></div> </label> <label class="control control--checkbox">Android (20) <input type="checkbox" /> <div class="control__indicator"></div> </label> <label class="control control--checkbox">Windows (8) <input type="checkbox" /> <div class="control__indicator"></div> </label> </div> </div> 

---

Well you can achieve this by using only css if you are allowed to change some of your markup like wrapping the text inside the .control__indicator div and some changes on css too...

 .control-group { display: inline-block; vertical-align: top; } .control-group .control { display: block; position: relative; cursor: pointer; font-size: 18px; padding-left: 30px; margin: 15px 0; } .control-group .control input { position: absolute; z-index: -1; opacity: 0; } .control-group .control__indicator:after, .control-group .control__indicator:before { content: ""; position: absolute; top: 2px; left: 0; height: 20px; width: 20px; } .control-group .control--checkbox { font-weight: 400; font-size: 14px; } .control-group .control--checkbox .control__indicator:after { left: 8px; width: 5px; height: 12px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .control-group .control--checkbox input:checked~.control__indicator:before { background-color: green; border: 1px solid green; } .control-group .control--checkbox input:disabled~.control__indicator:after { border-color: #7b7b7b; } .control-group .control--checkbox input:disabled~.control__indicator:after { border-color: #7b7b7b; } .control-group .control--checkbox .control__indicator:before { border: 1px solid #ccc; top: 0; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); } .control-group .control--checkbox input:checked~.control__indicator { font-weight: bold; } 

 <div class="facet-group"> <h3>Operating System</h3> <div class="control-group"> <label class="control control--checkbox"> <input type="checkbox" /> <div class="control__indicator">Apple iOS (42)</div> </label> <label class="control control--checkbox"> <input type="checkbox" /> <div class="control__indicator">Android (20)</div> </label> <label class="control control--checkbox"> <input type="checkbox" /> <div class="control__indicator">Windows (8)</div> </label> </div> </div> 

Answer 5

Following code will be helpful to you,

 // This code will fire on checkbox change event. $('.control--checkbox input').on('change',function(){ // Getting parent div of the current checkbox var $parentDiv = $(this).parent(); // Here checking whether it is checked or not if(this.checked){ // If it is checked this code will execute $parentDiv.css({fontWeight: "bold"}) } else { // If it is not checked this code will execute $parentDiv.css({fontWeight: "400"}) } }); 

 .control-group { display: inline-block; vertical-align: top; } .control-group .control { display: block; position: relative; cursor: pointer; font-size: 18px; padding-left: 30px; margin: 15px 0; } .control-group .control input { position: absolute; z-index: -1; opacity: 0; } .control-group .control__indicator { position: absolute; top: 2px; left: 0; height: 20px; width: 20px; background: white; } .control-group .control--radio .control__indicator { border-radius: 50%; border: 1px solid #ccc; } .control-group .control:hover input ~ .control__indicator, .control-group .control input:focus ~ .control__indicator { background: #fff; } .control-group .control input:checked ~ .control__indicator { background: #fff; } .control-group .control__indicator:after { content: ''; position: absolute; display: none; } .control-group .control input:checked ~ .control__indicator:after { display: block; } .control-group .control--checkbox { font-weight: 400; font-size: 14px; } .control-group .control--radio .control__indicator:after { left: 4px; top: 4px; height: 10px; width: 10px; border-radius: 50%; background: green; } .control-group .control--checkbox .control__indicator:after { left: 6px; top: 0; width: 7px; height: 14px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .control-group .control--checkbox input:checked ~ .control__indicator { background-color: green; border: 1px solid green; } .control-group .control--checkbox input:disabled ~ .control__indicator:after { border-color: #7b7b7b; } .control-group .control--checkbox input:disabled ~ .control__indicator:after { border-color: #7b7b7b; } .control-group .control--checkbox .control__indicator { border: 1px solid #ccc; top: 0; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="facet-group"> <h3>Operating System</h3> <div class="control-group"> <label class="control control--checkbox">Apple iOS (42) <input type="checkbox" /> <div class="control__indicator"></div> </label> <label class="control control--checkbox">Android (20) <input type="checkbox" /> <div class="control__indicator"></div> </label> <label class="control control--checkbox">Windows (8) <input type="checkbox" /> <div class="control__indicator"></div> </label> </div> </div>