Make the checkbox font-weight bold when it is checked

Question

Make the checkbox font-weight bold when it is checked

Attempting to apply custom CSS to enhance the appearance of checkboxes using input and label elements. The goal is to make the font-weight bold when a user clicks on the checkbox, and then revert it back to regular if clicked again. Currently stuck on this styling challenge!

Check out the Fiddle

$(function() {
  var action = 1;
  $('.control--checkbox input').on("click", handleFontWeight);

  function handleFontWeight() {
    if (action == 1) {
      adjustFontWeight("bold");
      action = 2;
    } else {
      adjustFontWeight("400");
      action = 1;
    }
  }

  function adjustFontWeight(val) {
    $('.control--checkbox').css({
      fontWeight: val
    })
  }
});

.control-group {
  display: inline-block;
  vertical-align: top;
}

/* Rest of the CSS code remains unchanged */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="facet-group">
  <h3>Operating System</h3>
   /* HTML structure for checkboxes remains intact */
</div>

javascript jquery html css

Answer 1

Answer №1

Give this a shot

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

Give this a shot

$(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 3

Answer №2

The need for the action checks is unnecessary. It's possible to verify if they are checked by utilizing event.target.checked, which will provide either 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;
}

....(CSS styling continued)....

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

    ... (HTML code for checkboxes) ...
    
  </div>
</div>

Note: It's also achievable with pure CSS alone.

Answer 4

The need for the action checks is unnecessary. It's possible to verify if they are checked by utilizing event.target.checked, which will provide either 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;
}

....(CSS styling continued)....

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

    ... (HTML code for checkboxes) ...
    
  </div>
</div>

Note: It's also achievable with pure CSS alone.

Answer 5

Answer №3

Utilize this.checked to verify its value...if checked, apply font-weight:bold using css() in 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;
}

/* CSS Styles */
.control-group .control {
  /* styling properties */
}

// More CSS styles here...

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

You can achieve this by using only css if you are allowed to make some adjustments to your markup like wrapping the text inside the .control__indicator div and modifying the css as well...

.control-group {
  display: inline-block;
  vertical-align: top;
}

/* Additional CSS Styles */

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

Utilize this.checked to verify its value...if checked, apply font-weight:bold using css() in 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;
}

/* CSS Styles */
.control-group .control {
  /* styling properties */
}

// More CSS styles here...

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

You can achieve this by using only css if you are allowed to make some adjustments to your markup like wrapping the text inside the .control__indicator div and modifying the css as well...

.control-group {
  display: inline-block;
  vertical-align: top;
}

/* Additional CSS Styles */

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

Answer №4

You can achieve the same outcome using only CSS, without needing any JavaScript or jQuery.

Live Example

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 8

You can achieve the same outcome using only CSS, without needing any JavaScript or jQuery.

Live Example

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 9

Answer №5

Below is a code snippet that can be useful for you:

// This code will trigger on checkbox change event.
 $('.control--checkbox input').on('change',function(){
      // Get the parent div of the current checkbox
      var $parentDiv = $(this).parent();
      // Check if it is checked or not
      if(this.checked){
           // Execute this code if it is checked
           $parentDiv.css({fontWeight: "bold"})
      } else {
           // Execute this code if it is not checked
           $parentDiv.css({fontWeight: "400"})
      }
});

.control-group {
display: inline-block;
vertical-align: top;
}

/* CSS styles for the control group */

<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">
    /* HTML structure for checkboxes */
  </div>
</div>

Answer 10

Below is a code snippet that can be useful for you:

// This code will trigger on checkbox change event.
 $('.control--checkbox input').on('change',function(){
      // Get the parent div of the current checkbox
      var $parentDiv = $(this).parent();
      // Check if it is checked or not
      if(this.checked){
           // Execute this code if it is checked
           $parentDiv.css({fontWeight: "bold"})
      } else {
           // Execute this code if it is not checked
           $parentDiv.css({fontWeight: "400"})
      }
});

.control-group {
display: inline-block;
vertical-align: top;
}

/* CSS styles for the control group */

<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">
    /* HTML structure for checkboxes */
  </div>
</div>

Make the checkbox font-weight bold when it is checked

Answer №1

Answer №2

Answer №3

Answer №4

Live Example

Answer №5

Similar questions

Guide to highlighting manually selected months in the monthpicker by utilizing the DoCheck function in Angular

The value stored in $_POST['valuename'] is not being retrieved

The reason the section's height is set to 0 is due to the absolute positioning of the div

Utilizing the smallslider feature through jQuery/JavaScript operations

Angular is known for sending only the fields that have changed to the update method

Strange Safari 15 bug causing unexpected transformations

UI-Bootstrap selectively adds modal backdrop to specific elements

Issue with CSS in Internet Explorer 7

Creating the perfect layout with CSS: A step-by-step guide

Having trouble getting the CSS Transform property to be affected by ScrollTop

Grasping the idea of elevating state in React

Anomaly with Responsive Images in Internet Explorer 7

The concept of using the `map` method within a

Click the mouse to create a unique path from the list items within the <ul> <li> using jQuery

Show flexibility in the grandchildren of a row layout

Utilizing JSON strings within an onclick function

Issue with draggable div containing gmap not functioning on mobile browsers

Utilizing the datepicker options function within a different function

Using the @ symbol in jQuery within an MVC framework can be achieved by first ensuring that

Organize the array following the guidelines of a card game with a versatile approach