Question

我已经抓住了一些CSS来美化我的复选框，因为他们在点击时将它们设置为自我检查，我不确定问题出在哪里。 CSS是：

.time-check-input{
  width: 20px;
  position: relative;
  margin: 20px auto;
  label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: #fcfff4;
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    border-radius: 4px;
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    &:after {
      content: '';
      width: 9px;
      height: 5px;
      position: absolute;
      top: 4px;
      left: 4px;
      border: 3px solid #333;
      border-top: none;
      border-right: none;
      background: transparent;
      opacity: 0;
      transform: rotate(-45deg);
    }
    &:hover::after {
      opacity: 0.5;
    }
  }
  input[type=checkbox] {
    visibility: hidden;
    &:checked + label:after {
      opacity: 1;
    }
  }    
}

HTML：

<div class="time-check">
    <input type="checkbox" value="None" class="time-check-input" id="{{level.LevelTmsCode}}-{{day.Day}}-open" name="check"/>
    <label for="{{level.LevelTmsCode}}-{{day.Day}}-open" class="time-check-input"></label> <span>Open</span>
</div>

我不介意用JavaScript做它 - 它不一定都是CSS，但显然我希望尽可能少的JS和/ Jquery。

Answer 1

您可以使用javascript方式设置复选框checked

document.getElementsByClassName('time-check-input')[0].checked = true;

<div class="time-check">
    <input type="checkbox" value="None" class="time-check-input" id="{{level.LevelTmsCode}}-{{day.Day}}-open" name="check"/>
    <label for="{{level.LevelTmsCode}}-{{day.Day}}-open" class="time-check-input"></label> <span>Open</span>
</div>

如果你想使用JQuery，那么：

$('.time-check-input').attr('checked',true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="time-check">
    <input type="checkbox" value="None" class="time-check-input" id="{{level.LevelTmsCode}}-{{day.Day}}-open" name="check"/>
    <label for="{{level.LevelTmsCode}}-{{day.Day}}-open" class="time-check-input"></label> <span>Open</span>
</div>

Answer 2

我认为这个问题可能只是在你的SASS / LESS，我的香草和你的CSS，这一切都对我有用

＆＃13;

.squaredFour {
  width: 20px;
  position: relative;
  margin: 20px auto;
}
.squaredFour label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: #fcfff4;
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    border-radius: 4px;
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}
.squaredFour label:after {
      content: '';
      width: 9px;
      height: 5px;
      position: absolute;
      top: 4px;
      left: 4px;
      border: 3px solid #333;
      border-top: none;
      border-right: none;
      background: transparent;
      opacity: 0;
      transform: rotate(-45deg);
    }
.squaredFour label:hover::after {
      opacity: 0.5;
    }
.squaredFour input[type=checkbox] {
    visibility: hidden;
}
.squaredFour input[type=checkbox]:checked + label:after
{
      opacity: 1;
}

＆＃13;

<div class="squaredFour time-check">
    <input type="checkbox" value="None" class="time-check-input" id="{{level.LevelTmsCode}}-{{day.Day}}-open" name="check"/>
    <label for="{{level.LevelTmsCode}}-{{day.Day}}-open" class="time-check-input"></label> <span>Open</span>
</div>

＆＃13;

可以设置复选框以进行检查

2 个答案: