jQuery 中的复选框验证

在本文中，我们将学习如何使用 jQuery 验证复选框。为此，我们使用了 jQuery 的两种方法。

• .prop 方法
• .is 方法

这两种方法都用于在 jQuery 中验证复选框。

首先，我们将学习一些关于 jQuery 和复选框元素的基础知识。接下来，我们将通过使用这两种方法的各种示例来解释这个概念。

什么是复选框？

复选框用于显示小方框，为用户提供一系列可以“打开”和“关闭”的选择。如果选择了某个选项，则会显示一个勾号；否则，方框将保持为空。表单中可以有多个复选框，每个复选框都与其他复选框独立工作。当问到访客一个可以有多个正确答案的问题时，就会使用它。

通过设置属性 type 为 "checkbox" 的 <input> 标签 来创建复选框。

语法

可以为复选框指定的属性是

• Name (名称): 复选框的此属性用于为复选框指定一个名称。
• Value (值): 复选框的此属性用于为每个复选框提供一个值。如果选中了复选框，则会发送此值。
• Checked (选中): 复选框的此属性用于设置复选框的默认值。

示例

在此示例中，我们可以在表单中创建各种爱好选项。访客可以选择一个或多个爱好选项，例如唱歌、跳舞和阅读。默认情况下，“阅读”选项是选中的，因为我们设置了此属性为 checked。

jQuery 中的复选框验证

jQuery 是一个快速、轻量级且功能丰富的 JavaScript 库。

通过使用 jQuery，我们可以验证复选框。我们正在使用 jQuery 的两种方法来验证 <input type ="checkbox">。这些方法是：

• 使用 jQuery 的 prop () 方法
• 使用 jQuery 的 is () 方法

使用 jQuery prop () 方法

jQuery 的 prop () 方法 提供了一种简单、有效且可靠的方式来跟踪复选框的当前状态。它在所有情况下都能很好地工作，因为每个复选框都有一个 checked 属性，该属性指定了其选中或未选中的状态。

prop () 方法的语法

在上面的语法中，selector 可以是任何 <input> 元素，例如复选框；prop 是一个用于检查 <input> 值的 方法；parameter 定义了输入状态的当前值。

让我们通过一些示例使用 jQuery prop () 方法

示例 1

说明

在此示例中，我们使用 jQuery 的 prop 方法来验证复选框是否被选中。

此 jQuery 代码用于验证复选框。

输出

在上面的示例中，如果我们选择复选框的值，则注册表单；否则，表单未注册。

如果未选中复选框，则显示以下输出。

上面的输出表明，在注册表单之前，我们必须同意条款和条件。

使用 jQuery is () 方法

此 jQuery 方法非常简单易用。通过使用此方法，我们可以轻松地判断复选框是否被选中。

is () 方法的语法

在上面的语法中，selector 可以是任何 <input> 元素，例如复选框；is() 方法用于检查 <input> 的值；parameter 定义了输入状态的当前值。

让我们通过一些示例使用 jQuery is () 方法

示例 1

说明

在此示例中，我们使用 jQuery 的 is() 方法来验证复选框是否被选中。

此 jQuery 代码用于验证复选框。

输出

在上面的示例中，如果我们选择复选框的值，则可以订阅表单。否则，表单未订阅。

如果未选中复选框，则显示以下输出。

上面的输出表明，在订阅表单之前，我们必须同意条款和条件。

示例 2

说明

在此示例中，我们使用 jQuery 的 is() 方法来验证复选框是否被选中。如果选中了复选框，则显示带有您同意条件的警报消息；如果未选中复选框，则显示带有请勾选条款和条件的警报消息。

此 jQuery 代码用于检查复选框的状态。

输出

如果我们选中复选框，则显示以下输出。

如果我们不选中复选框，则显示以下输出。