在 html 中启用和禁用复选框-ag捕鱼王app官网

当前位置：ag捕鱼王app官网 > > web前端 > html >

vue react javascript angular css html

在 html 中启用和禁用复选框

作者：迹忆客最近更新：2023/05/05 浏览次数：

本文探讨了在 html 中启用和禁用复选框的方法。

html 中的复选框

复选框是一个交互式框，可以切换以表示肯定或否定。它广泛用于表单和对话框。

当有一些选项时使用复选框，用户可以自由选择任意数量的选项，包括零。这意味着选中一个不会自动取消选中其他选项。

当存在不互斥的选项时，主要使用复选框。每个选项的侧面都会出现一个小框，可以切换。

默认情况下，该框为空。空框表示否定，或者用户没有选择该选项。

单击时，框内会出现一个复选标记。复选标记表示肯定。

再次单击时，复选标记消失。

您可以使用标记在 html 中创建一个复选框，并将其类型属性设置为复选框。您可以在标签后写上项目名称。

例如，使用 ul 标签创建一个无序列表，并将样式设置为 list-style: none; 这样列表项就不会出现项目符号。创建四个列表项并使用为每个列表项创建一个复选框。

代码示例：

<ul style="list-style: none;">
    <li><input type="checkbox">drinkli>
    <li><input type="checkbox">eatli>
    <li><input type="checkbox">codeli>
    <li><input type="checkbox">repeatli>
ul>

每个列表项都默认在其各自的复选框中具有切换功能。

使用 checked 属性在 html 中默认启用复选框

如果您需要一个复选框，其中某个选项在默认情况下始终处于选中状态，您可以为标记实现一个属性。要使用的属性是 checked 属性。

您只需要将属性的值设置为选中即可将其默认选中。

例如，对于 drink 和 repeat 选项，添加属性 checked 并将其值设置为“checked”。这确保默认选中这两个值的复选框。

示例代码：

<ul style="list-style: none;">
    <li><input type="checkbox" checked="checked">drinkli>
    <li><input type="checkbox">eatli>
    <li><input type="checkbox">codeli>
    <li><input type="checkbox" checked="checked">repeatli>
ul>

单击即可随时关闭选中的选项。

我们也可以单独使用 checked 来获得相同的输出。

示例代码：

<ul style="list-style: none;">
    <li><input type="checkbox" checked>drinkli>
    <li><input type="checkbox">eatli>
    <li><input type="checkbox">codeli>
    <li><input type="checkbox" checked>repeatli>
ul>

在 html 中使用 disabled 属性默认禁用复选框

要在 html 中默认禁用复选框，您可以使用名为 disabled 的属性。将 disabled 属性的值指定为 disabled 将阻止用户选中该复选框。

考虑以下示例。

示例代码：

<ul style="list-style: none;">
    <li><input type="checkbox" disabled="disabled">drinkli>
    <li><input type="checkbox">eatli>
    <li><input type="checkbox">codeli>
    <li><input type="checkbox" disabled="disabled">repeatli>
ul>

从输出中可以清楚地看出，四个选项中只有两个具有切换功能。可以切换 eat 和 code 以显示刻度线，但 drink 和 repeat 不能。

默认情况下禁用选项 drink 和 repeat。当我们点击 drink and repeat 选项旁边的复选框时，该复选框不会响应我们的点击。

这使得四个选项中只有两个可检查。

单独使用 disabled 可以获得同样的结果。

示例代码：

<ul style="list-style: none;">
    <li><input type="checkbox" disabled>drinkli>
    <li><input type="checkbox">eatli>
    <li><input type="checkbox">codeli>
    <li><input type="checkbox" disabled>repeatli>
ul>