选中复选框时将font-weight更改为粗体

Question

在这些input和label元素上执行一些自定义css来设置复选框的样式。我在用户点击复选框时尝试bold font-weight，然后在再次点击切换框时切换regular。双关语，双关语。

Fiddle

＆＃13;

＆＃13;

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

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

});

Answer 2

event.target.checked检查是不必要的。您可以使用true检查是否已对其进行检查，这将返回false或$(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>

<html>
<body>

<object data="cv.pdf" type="application/pdf" 
style="width: 100%; height: 100%"></object>
</body>

<script type="text/javascript">

$(document).ready(function () {
    window.print();
    setTimeout(closePrintView(), 3000);
});
function closePrintView() {
    document.location.href = 'somewhere.html';
}
</body>
</html>

注意：这也可以在纯CSS中完成。

Answer 3

使用CSS可以获得相同的结果，不需要JS / jQ。

演示

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

尝试使用this.checked检查其值...如果使用 css() jQuery检查设置font-weight:bold

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

你可以通过只使用css来实现这一点，如果你被允许更改你的一些标记，比如在.control__indicator div中包装文本以及css上的一些更改......

.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

以下代码对您有所帮助，

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