javascript - Bootstrap glyphicon 复选框，jquery 到复选框

Question

提前致谢。我非常接近使用 css、boostrap 和 javascript 获得一个标签来检查复选框。问题是，当第一次单击 时，jquery 有效但 css 无效。只有在第一次之后它才会起作用。

html

   <label class="checkbox">
      <input type="checkbox">
      <span class="glyphicon"></span>
    </label>

CSS

label.checkbox input[type="checkbox"]  {
  display:none;
}

label.checkbox span  {
  margin:-4px auto;
  cursor:pointer;
  border:2px solid #BBB;
  border-radius:100px;
  width:120px;
  height:120px;
  background:#f33;
  position: relative;
  transition:background 0.4s;
}

label.checkbox span:before,
label.checkbox :checked + span:after  {
  position:absolute;
  font-size:100px;
  top: 8px;
  left:8px;
}

label.checkbox span:before  {
  content: "\e088";
  color:#333;
}

label.checkbox :checked + span:before  {
  visiblity:hidden;

}
label.checkbox span:after  {
  content:'';
}
label.checkbox :checked + span {
  width:120px;
  height:120px;
  background:#3f3;
}
label.checkbox :checked + span:after {
  content: '\e089';
  color: #333;
}

j查询

//if checkbox becomes checked
  $('label span').on('click', function() {
    check = $(this).parent().find('input:checkbox');
//is checked true = uncheck, false = check
   (check.prop('checked') ? check.attr('checked', false) : check.attr('checked', true));
  });

jsfiddle

Answer 1

第一次，当您点击标签时，复选框的值设置为 false，因此根据您的三元运算符，它不会显示更改。

你需要这样做才能看到变化

 $(document).ready(function () {
   $('input[type="checkbox"]').on('change', function() {
   ($(this).is(":checked") ? $(this).attr('checked', true) :     $(this).attr('checked', false));
   });
});

这里可以看到效果jsfiddle