关于jQuery点击检查框的定义（详细教程）

迪鲁宾
143 阅读4分钟

jQuery click checkbox

关于jQuery点击检查框的定义

jQuery点击检查框方法是将一个jQuery对象的内容与一个选择器的内容进行比较。我们可以使用JavaScript和jQuery以各种方式绑定到HTML复选框的变化或点击事件。我们也可以使用jQuery的prop方法，如果输入的复选框被勾选，则返回true，反之则返回false。我们可以直接访问DOM元素的checked属性。

什么是jQuery的点击复选框？

  • jQuery的prop方法可以动态地检查或取消一个复选框，如当一个按钮或超链接被点击。
  • jQuery prop方法是一个直接的，有效的，可靠的方式来确定一个复选框的当前状态。因为每个复选框都包含一个描述它是否被选中的checked属性，它在任何情况下都能很好地发挥作用。

如何jQuery点击复选框？

  • 复选框是许多种类的输入字段之一，我们采用这些字段让用户与网页互动，并经常通过勾选任何对应的箱子将数据传送到后台。
  • 单个组中的复选框不是相互排斥的；因此，在检查是否有任何选项被选中时，用户可以选择许多适用的方框，这与单选按钮（属于单选组）不同。
  • 我们可以将逻辑外包给它的函数，而不是使用内置的checked属性。Is方法是一个广泛的方法，可能用于各种原因，它根据比较标准产生一个真或假的值。
  • 在jQuery的早期版本中，Attr被用来访问和操作元素的字段。在随后的版本中，A prop已经取代了这个方法。
  • 另一方面，Is方法总是产生一个布尔值，而prop只返回基础属性类型。
  • 我们不能确定没有别的东西通过，如果我们不正确地利用prop，我们的功能可能会在运行时失败。
  • checked选择器的创建主要是为了确定一个单选按钮或复选框元素是否被选中。
  • 这个方法比道具有更多的处理和解析开销。然而，在处理许多输入时，如在一个循环中，道具的性能更强，即使它不只是访问属性并做一些验证。
  • 它也表示一个布尔值的语义上的返回值，使它成为一个更可读的选项。

下面的例子显示了如何用jQuery点击检查框，如下所示。

代码

<!DOCTYPE html>
<html>
<body>
<p> jQuery Check CheckBox </p>
<label for = "myCheck">Checkbox:</label>
<input type="checkbox" id = "myCheck" onclick="myFunction ()">
<p id = "text" style = "display:none">We have clicked on checkbox</p>
<script>
function myFunction() {
var checkBox = document.getElementById("myCheck");
var text = document.getElementById("text");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
} }
</script>
</body>
</html>

1

jQuery点击复选框元素

  • 在jQuery中，我们可以挑选元素，检索它的底层对象，而不是jQuery对象（[0]），并使用内置的checked属性来检查Checkbox是否已经被选中。
  • 使用jQuery-checked选择器检查复选框的状态。Checked是一个用于单选按钮和复选框的选择器。
  • 改变输入类型的checked属性，可以用两种方式来动态检查当前选择的复选框。
  • prop方法可以访问输入并改变其属性。例如，这个方法可以操作'checked'属性，根据它是应该被选中还是不被选中，将其设置为真还是假。
  • Attr方法与上面的方法类似，但它更适合于旧的jQuery版本。我们可以使用attr方法访问输入并修改其属性。
  • 无论我们想检查或取消检查什么，我们必须改变'checked'属性并将其设置为真或假。
  • 当设置属性为'true'时，需要提供一个点击方法来确保选项组中的选项被修改。

下面的例子显示了jQuery点击复选框元素，如下图所示。下面的例子显示，点击yes按钮后，yes按钮的复选框将被选中。在点击no按钮后，该复选框将被取消选择。

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<title> jQuery click Checkbox </title>
<script src = "https://code.jQuery.com/jQuery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$(".check").click(function(){
$("#myCheck").prop("checked", true);
});
$(".uncheck").click(function(){
$("#myCheck").prop("checked", false);
});
});
</script>
</head>
<body>
<p><input type="checkbox" id="myCheck"> Are we sure to check and uncheck the checkbox</p>
<button type="button" class="check">Yes</button>
<button type="button" class="uncheck">No</button>
</body>
</html>

点击 "是 "后

Check and Uncheck the checkbox

点击 "否 "后

3

jQuery点击复选框的例子

下面是使用prop方法的jQuery点击复选框的例子。

代码

<!DOCTYPE html>
<html>
<head>
<title>
jQuery Click Checkbox.
</title>
<script src=
"https://code.jquery.com/jquery-2.2.4.min.js">
</script>
</head>
<body>
<center>
<h1 style="color: red">
jQuery Click Checkbox
</h1>
<b>
jQuery Click Checkbox
</b>
<p>
<input type="checkbox" name="option" id="front">
One
<input type="checkbox" name="option" id="back">
Two
</p>
<p>
<button type="button" class="check-front">
Click on One.
</button>
<button type="button" class="check-back">
Click on Two.
</button>
<button type="button" class="reset">
Reset the Checkbox.
</button>
</p>
<script type="text/javascript">
$(document).ready(function() {
$(".check-front").click(function() {
$("#front").prop("checked", true);
});
$(".check-back").click(function() {
$("#back").prop("checked", true);
});
$(".reset").click(function() {
$("#front").prop("checked", false);
$("#back").prop("checked", false);
});
});
</script>
</center>
</body>
</html>

4

5

jQuery click checkbox - 6

下面是使用attr方法的jQuery点击复选框的例子:

代码

<!DOCTYPE html>
<html>
<head>
<title>
jQuery Click Checkbox.
</title>
<script src=
"https://code.jquery.com/jquery-2.2.4.min.js">
</script>
</head>
<body>
<center>
<h1 style="color: red">
jQuery Click Checkbox
</h1>
<b>
jQuery Click Checkbox
</b>
<p>
<input type="checkbox" name="option" id="front">
One
<input type="checkbox" name="option" id="back">
Two
</p>
<p>
<button type="button" class="check-front">
Click on One.
</button>
<button type="button" class="check-back">
Click on Two.
</button>
<button type="button" class="reset">
Reset the Checkbox.
</button>
</p>
<script type="text/javascript">
$(document).ready(function() {
$(".check-front").click(function() {
$("#front").attr("checked", true);
});
$(".check-back").click(function() {
$("#back").attr("checked", true);
});
$(".reset").click(function() {
$("#front").attr("checked", false);
$("#back").attr("checked", false);
});
});
</script>
</center>
</body>
</html>

jQuery click checkbox - 7

8

jQuery click checkbox - 9

结论

Checked选择器的创建主要是为了确定一个单选按钮或复选框元素是否被选中。这个方法在jQuery中比较一个jQuery对象的内容和一个选择器的内容。prop方法需要jQuery 1.6或更高的版本。

avatar
文章
阅读
粉丝