使用 CSS 取消选中复选框答案

【问题标题】：Uncheck a checkbox using CSS使用 CSS 取消选中复选框
【发布时间】：2014-07-30 21:11:58
【问题描述】：

对于那些不熟悉的人，复选框的选中属性将接受任何输入作为选中该框的标志。事实上，它不需要任何文本。所以所有这些都会选中该框

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

所有这些都会选中该框。

我的问题是我收到了一个复选框，需要取消选中它。我不能只是改变它的价值——这仍然使它被选中。我需要从轨道上用核武器摧毁它。使用 javascript 或 jQuery 非常容易做到这一点，但该网站不允许在我的 CSS 中使用任何这些。

我阅读了大约 100 个属性的列表以及如何重置它们 - 自动、正常、0、继承等，但“已检查”不在列表中，我尝试了所有这些以及我能想到的任何东西，并且这个复选标记不会消失。

【问题讨论】：

checked 不是style attribute 所以你不能使用css修改它
只是为了让这一点更清楚 - checked 属性是 boolean attribute，这意味着它在标记中的存在表示一个真实值，而不管它给出的“值”是什么。

标签： html css checkbox

【解决方案1】：

简单的答案是NO，CSS 不能帮你取消选中复选框..

但是

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

测试用例：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;
}

【讨论】：

根据定义它不应该。
问题是关于取消选中复选框，因此建议仅在样式中使用检查状态的方法无关紧要。它甚至可能有点令人困惑。
@JukkaK.Korpela 我用粗体写了 detect 这个词，应该足以让用户理解 CSS 仍然无法取消选中复选框... :)

【解决方案2】：

CSS 不是用于 dom 操作，它用于 dom 样式和排列，您不能从 css 设置 dom 属性，但您可以检查 css 条件并设置样式。 :)

【讨论】：

【解决方案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 -->

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

【讨论】：

恐怕 OP 明确指出 使用 javascript 或 jQuery 非常容易做到这一点，但该网站不允许在我的 CSS 中使用任何这些。此外，即使这是相关的，您也应该使用 .prop() 方法而不是 .attr()。

【解决方案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>

【讨论】：