使用CSS取消选中复选框 [英] Uncheck a checkbox using CSS

问题描述

对于不熟悉的用户，复选框的checked属性将接受任何输入作为选中复选框的符号。实际上，它不需要任何文本。因此所有这些都将选中该框

For those not familiar, the checked attribute for a checkbox will accept any input as a sign to check the box. in fact, it doesnt need any text. so all these will check the box

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

所有这些都将选中该框。

all those WILL check the box.

我的问题是我被选中了一个复选框，需要取消选中它。我不能只更改其值-仍然对其进行检查。我需要从轨道上核弹。使用javascript或jQuery，这非常容易，但是该网站不允许我的CSS中的任何内容。

My problem is i am being handed a checked box, and need to uncheck it. I cant just change its value - that still makes it checked. i need to nuke it from orbit. This is incredibly easy to do with javascript or jQuery, but the site does not allow any of that in my CSS.

我阅读了约100个属性以及如何重置它们-自动，正常，0，继承等，但是选中不在列表中，我尝试了所有这些以及我能想到的所有内容，并且此对勾不会消失。

I read a list of about 100 attributes and how to reset them - auto, normal, 0, inherit, et cetera, but 'checked' was not on the list, and i tried all of those and anything i could think of, and this checkmark wont die.

推荐答案

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

The simple answer is NO, CSS cannot help you uncheck the checkbox..

BUT

您可以使用CSS 检测是否输入通过使用：checked 和：not（：checked）来检查元素。 。

You can use CSS to detect whether the input element is checked or not by using :checked and :not(:checked) ..

测试用例： 演示

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

这篇关于使用CSS取消选中复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！