Html 使用 CSS 取消选中复选框

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/24135355/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 02:00:36  来源:igfitidea点击:

Uncheck a checkbox using CSS

htmlcsscheckbox

提问by user3725005

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.

所有这些都将选中该框。

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.

我的问题是我收到了一个选中的框,需要取消选中它。我不能只是改变它的值 - 这仍然使它被检查。我需要从轨道上核对它。使用 javascript 或 jQuery 做到这一点非常容易,但该站点不允许在我的 CSS 中使用任何这些。

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.

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

回答by Mr. Alien

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

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

BUT

You can use CSS to detectwhether the inputelement is checked or not by using :checkedand :not(:checked)..

您可以使用 CSS 来检测input元素是否被选中,方法是使用:checked:not(:checked)..

Test Case : Demo

测试用例 : Demo

HTML

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

CSS

input:checked + label {
    color: green;
}

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

回答by Laxmikant Dange

CSS is not for dom manipulation, its for dom styling and arrangements, You can not set dom attributes from css but you can check for css conditions and set styles. :)

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

回答by AJ101

Its possible to check/uncheck checkbox using jquery. Here is the code:

可以使用 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 -->

Fill free to mark correct answer if you think this is what you are looking at..

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