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

jquery的

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

Answer 2

您可以使用此javascript

while True:
        choice = input('continue?')
        if choice =='Y' or choice =='N':
            print(choice )
            break
        else:
            continue

Boostrap glyphicon复选框，jquery复选框

2 个答案: