在 JavaScript 中选中复选框时显示文本
本文向你介绍了在 JavaScript 中选中复选框时显示文本的不同技术。它还向你介绍 JavaScript 和 jQuery 函数和事件。
使用 JavaScript.checked 属性来显示复选框被选中时的文本
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Checkbox</title>
</head>
<body>
<p>Let see how to know if check box is checked:</p>
<label for="check">Checkbox:</label>
<input type="checkbox" id="check" onclick="checkfunction()">
<p id="message" style="display:none">Checkbox is Checked Now!</p>
</body>
</html>
JavaScript 代码：
function checkfunction() {
var check = document.getElementById('check');
var message = document.getElementById('message');
if (check.checked == true) {
message.style.display = 'block';
} else {
message.style.display = 'none';
}
}
输出：
上面给出的代码通过定位元素的 id 值、check 和 message 来获取元素。然后，它检查 check.checked 的值是 true 还是 false。
如果它是 true，它会显示存储在 message 变量中的消息。然而，.checked 是一个 Boolean 属性，可以是 true 或 false。
我们可以在纯 JavaScript 中使用此属性并将其与 jQuery 函数结合使用。
我们可以使用 alert 函数在浏览器中显示弹出消息，而不是在窗口上显示消息来判断复选框是否被选中。你可以用下面的代码替换你的 JavaScript 代码来练习。
JavaScript 代码：
function checkfunction() {
if ((document.getElementById('check')).checked) {
alert('The checkbox is checked');
} else {
alert('The checkbox is not checked')
}
}
输出：
使用 jQuery is() 函数和 JavaScript .checked 属性来显示复选框被选中时的文本
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Checkbox Practice</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" id="check"> Check it and Submit
<button onclick="checked()"> Submit </button>
</body>
</html>
JavaScript 代码：
function checked() {
if ($('#check').is(':checked')) {
alert('Checked');
} else {
alert('Not Checked');
}
}
输出：
如果你单击标题为 Submit 的 button，checked() 方法将在上面给出的代码中执行。此方法获取 id 属性值为 check 的第一个元素。
此外，它检查元素的 checked 属性是 true 还是 false。如何？在这里，is() 函数检查所选元素是否与选择器元素匹配。
is() 函数检查当前元素与另一个元素；它可以是选择器或 jQuery 对象。
is() 方法有两个参数，一个是强制的，另一个是可选的（selectorElement 是强制的，function(index, element) 是可选的）。如果条件满足 false，此函数返回 true。
请记住，$ 在这里的行为类似于 document.getElementById。如果复选框被选中，上面的代码将显示 Checked；否则，未检查。
使用 jQuery ready 和 click 事件来显示复选框被选中时的文字
HTML 代码：
<html>
<head>
<title>practice ready and click events</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" id="check"> Check it
</body>
</html>
JavaScript 代码
$(document).ready(function() {
$('input').click(function() {
alert('You checed....');
});
});
输出：
ready 和 click 是 JavaScript 中使用的 jQuery 事件。
ready 事件在加载文档对象模型 (DOM) 时发生。你可以在此处查看有关 ready 的更多详细信息。
click 用于将点击事件分配给选定的元素。在我们的示例中，它是一个 input 标签。你可以阅读此处了解更多详情。
请记住，只有在你想选中复选框时才能使用这些事件。原因是它检测 click 事件而不是检查 checked 属性。
在上面给出的输出中，你可以观察到它始终显示 You Checked。它不关心你是否取消选中，但它只是检测你是否单击。
它注意到 click 事件，这有助于了解复选框是否仅被选中。如果你还想知道复选框是否未选中，这不是一个好的选择。
相关文章
JavaScript 中的 Map 索引
发布时间：2024/03/20 浏览次数：197 分类：JavaScript
-
JavaScript map 方法很容易实现，我们将讨论它的不同参数，以及它们在不同场景中的使用方式。
JavaScript 中 let 和 var 的区别
发布时间：2024/03/20 浏览次数：79 分类：JavaScript
-
本教程描述了两个关键字 var 和 let 在 JavaScript 中的实际区别。
JavaScript 指针
发布时间：2024/03/20 浏览次数：166 分类：JavaScript
-
JavaScript 没有明确的方法来定义指针。它允许在对象之间传递值和引用，但不能显示引用。本文将介绍在 JavaScript 中定义指针的好方法。
JavaScript 元组示例
发布时间：2024/03/20 浏览次数：166 分类：JavaScript
-
在 JavaScript 语言中，元组是具有不可变特性的数组类型。我们可以使用单个变量访问元组，该变量是数组的一种。
使用 JavaScript 编码 HTML
发布时间：2024/03/20 浏览次数：83 分类：JavaScript
-
本教程将教你如何使用不同的方法对 HTML 字符串进行编码。这些方法的共同点是字符串替换，它替换了具有潜在危险的字符。
使用 JavaScript 加载外部 HTML 文件
发布时间：2024/03/20 浏览次数：133 分类：JavaScript
-
本文演示了如何使用 JavaScript 和 jQuery 加载外部 html 文件。
JavaScript 延迟后重定向页面
发布时间：2024/03/20 浏览次数：87 分类：JavaScript
-
本教程展示了如何使用 JavaScript 中的 setTimeout 方法在延迟后重定向页面。
