Question

我想知道如何修改此代码以处理从模拟复选框中取消选中。

首先，这是原始输入html：

<input type="radio" name="rf538" id="rf538" class="page_checkbox">

这是类page_checkbox的输入css：

.page_checkbox {
   display: none;
}

在输入html之后，我有了这个：

<label for="rf538"><span></span>Pleasures</label>

以下是我在span内的label的css代码：

.page_checkbox+label span {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: -2px 8px 0px 0px;
    background-color: #ffffff;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 1px;
}

最后，这是创建复选框和检查的css代码：

.page_checkbox:checked+label span:before {
    position: relative;
    left: 3px;
    top: 2px;
    content: '\002714';
    color: #f06000;
    font: 16px/16px Arial, Helvetica, Sans-serif;
}

您可以看到有checked state的CSS，但我不知道如何处理unchecking the checked span box。我想是有些javascript参与了吗？

Answer 1

由于您无法在没有JavaScript或重置按钮的情况下取消选中单选按钮，因此您所看到的是一个复选框，因此请将单选按钮更改为复选框，然后才能正常工作。

＆＃13;

.htaccess

＆＃13;

.page_checkbox {
  display: none;
}

.page_checkbox+label span {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: -2px 8px 0px 0px;
  background-color: #ffffff;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 1px;
}

.page_checkbox:checked+label span:before {
  position: relative;
  left: 3px;
  top: 2px;
  content: '\002714';
  color: #f06000;
  font: 16px/16px Arial, Helvetica, Sans-serif;
}

＆＃13;

取消选中模拟复选框中的支票

1 个答案: