Question

对于那些不熟悉的人，复选框的checked属性将接受任何输入作为选中复选框的符号。事实上，它不需要任何文字。所以这些都会勾选方框

<input type="checkbox" checked />
<input type="checkbox" checked="false">
<input type="checkbox" checked="">
<input type="checkbox" checked="0">

所有那些将检查框。

我的问题是我被交给一个复选框，需要取消选中它。我不能改变它的价值 - 仍然会检查它。我需要从轨道上钻核它。使用javascript或jQuery非常容易，但该网站不允许在我的CSS中使用任何内容。

我读了一个大约100个属性的列表以及如何重置它们 - auto，normal，0，inherit等等，但是＆＃39;检查＆＃39;不在列表中，我尝试了所有这些和我能想到的任何东西，而且这个复选标记不会死。

Answer 1

简单的答案是 NO ，CSS无法帮助您取消选中复选框..

<强> BUT

您可以使用CSS来检测，是否使用input和:checked检查了:not(:checked)元素。

测试用例： Demo

<强> HTML

<ul>
    <li>
        <input type="checkbox" checked />
        <label for="">Checked</label>
    </li>
    <li>
        <input type="checkbox">
        <label for="">Unchecked</label>
    </li>
        <li>
        <input type="checkbox" checked>
        <label for="">Checked Again</label>
    </li>
</ul>

<强> CSS

input:checked + label {
    color: green;
}

input:not(:checked) + label {
    color: red;
}

Answer 2

CSS不适用于dom操作，它适用于dom样式和排列，你不能从css设置dom属性，但你可以检查css条件和设置样式。：）

Answer 3

可以使用jquery检查/取消选中复选框。这是代码：

$('#textCheckbox').attr('checked', true); // Enable CheckBox
$('#textCheckbox').attr('checked', false); // Disable CheckBox

After alteration, following will be the output of your input field

<input type="checkbox" id="textCheckbox" checked="checked" /> <!-- Checked -->
<input type="checkbox" id="textCheckbox" /> <!-- Unchecked -->

如果您认为这是您正在查看的内容，请填写标记正确答案。

Answer 4

问题是6年前提出的，但请注意，您可以给出一个未选中的CSS复选框的外观：

* {
  margin: 0;
  padding: 0;
  font-family: Arial;
  text-transform: capitalize;
}
html, body { padding: 1rem; }
input { display: none; }
label, label::after, hr, hr::after {
  display: block;
  overflow: visible;
  position: relative;
  transform: scale( 0.8 );
  width: 1rem;
  height: 1rem;
  border-style: none;
  border-radius: 0.125rem;
  box-shadow: 0rem 0rem 0rem 0.0625rem #666;
  content: '';
}
label::after, hr, hr::after {
  transform: scale( 1.15 );
  background-color: #07f;
  box-shadow: none;
}
label::after { display: none; }
label:hover { box-shadow: 0rem 0rem 0rem 0.0625rem #222; }
label:hover::after { background-color: #06e; }
label:active::after { background-color: #18f; }

<style>
  hr, hr::after {
    position: absolute;
    top: 0; left: 0.5rem;
    z-index: 1;
    transform: rotate( 40deg );
    width: 0.225rem;
    height: 0.9rem;
    background-color: #fff;
    border-radius: 0;
  }
  hr::after {
    top: 0.6rem; left: -0.17rem;
    transform: rotate( -90deg );
    height: 0.4rem;
  }
  #one:checked ~ [ for='one' ]::after { display: block; }
  
  [ for='two' ]::after { display: block; }
  
  #one:checked ~ [ for='two' ]::after { display: none; }
</style>

<input type='checkbox' id='one'>
<input type='checkbox' id='two' checked>

<p>check me</p>
<label for='one'> <hr> </label>

<br>

<p>to uncheck me</p>
<label for='two'> <hr> </label>

使用CSS取消选中一个复选框

4 个答案: