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

Question

在这些 input 和 label 元素上做一些自定义的 css 来设置复选框的样式。当用户单击复选框时，我试图加粗 font-weight，然后如果他们再次单击以切换该框，则切换常规 .难倒了这一点，双关语意。

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

试试这个

$(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)
    }
  });

});