jQuery通过id进行勾选对应的多选框|极客教程

jQuery通过id进行勾选对应的多选框

在web开发中，经常会遇到需要使用多选框（checkbox）的场景。而有时候，我们希望通过点击一个按钮或者元素，来实现勾选对应的多选框。本文将详细介绍如何使用jQuery通过id来勾选对应的多选框。

HTML结构

首先，我们需要先搭建一个简单的HTML结构，包含多个多选框和一个按钮，用来触发勾选操作。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery勾选多选框</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <label for="checkbox1">
        <input type="checkbox" id="checkbox1"> 多选框1
    </label>
    <label for="checkbox2">
        <input type="checkbox" id="checkbox2"> 多选框2
    </label>
    <label for="checkbox3">
        <input type="checkbox" id="checkbox3"> 多选框3
    </label>
    <button id="checkButton">勾选多选框1</button>

    <script src="script.js"></script>
</body>

</html>

在上面的代码中，我们定义了三个多选框（checkbox1、checkbox2、checkbox3）和一个按钮（checkButton）。

jQuery实现

接下来，我们使用jQuery来实现通过id来勾选对应的多选框。我们新建一个script.js文件，并编写如下代码：

$(document).ready(function () {
    // 监听按钮点击事件
    $('#checkButton').click(function () {
        // 通过id选择对应的多选框，并设置为勾选状态
        $('#checkbox1').prop('checked', true);
    });
});

在上面的代码中，我们首先使用$(document).ready()来确保DOM加载完成后再执行代码。然后使用$('#checkButton').click()来监听按钮点击事件。当按钮被点击时，我们通过$('#checkbox1').prop('checked', true)来选中id为checkbox1的多选框。

现在，我们可以在浏览器中打开HTML文件，并点击按钮来测试勾选多选框的功能。

进阶应用

除了勾选单个多选框，我们还可以实现勾选多个多选框的功能。例如，我们可以通过一个按钮来勾选所有多选框。

$(document).ready(function () {
    // 监听按钮点击事件
    $('#checkAllButton').click(function () {
        // 通过类选择器选择所有多选框，并设置为勾选状态
        $('.checkbox').prop('checked', true);
    });
});

在上面的代码中，我们给所有多选框添加了一个共同的类.checkbox，然后通过类选择器$('.checkbox')来选中所有多选框，并设置为勾选状态。