如何自动勾选复选框并在勾选后自动显示结果

htmlweb developmentfront end technology更新于 2025/3/29 23:08:17

使用带有 type="checkbox" 属性的 <input> 标签(也称为勾选框)创建 复选框。用户可以通过勾选一个或多个复选框来选择多个选项。在 HTML 中，复选框可以单独使用，也可以与"form"属性结合使用。提交问题或表单时，选中复选框的数据将被收集并保存在后端。

使用 <input> 元素的 type 属性创建复选框，语法如下:

<input type="checkbox" name="字段名称" value="初始值">

带有 可点击标签 的复选框更加实用。它允许用户通过点击标签来切换复选框的开启和关闭状态。有两种方法可以实现:将 <label> 包裹在 <input> 元素(复选框)周围，或者使用 for 属性将 <label> 绑定到 <input> 元素(复选框)。

这是 HTML 中复选框的简单代码。

示例

<!DOCTYPE html>
<html>
    <head>
        <title> Checkbox in HTML </title>
    </head>
<body>
<p> Display the result when the checkbox is checked: </p>
<label for= "checkbox1"> Checkbox: </label> 
<input type= "checkbox" id= "checkbox1" onclick= "checkFunction()">
<p id= "text" style= "display: none"> The Checkbox is CHECKED! </p>
<script>
function checkFunction() {
  var checkBox = document.getElementById("checkbox1");
  var text = document.getElementById("text");
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
     text.style.display = "none";
  }
}
</script>
</body>
</html>

如果我们希望复选框自动选中，并在选中时自动显示结果，我们可以使用 JavaScript 或 jQuery 来实现。

使用 JavaScript

checked 属性本质上是 boolean 值。当它存在时，表示在页面加载时应该预选或选中 <input> 元素。checked 属性可用于复选框和单选按钮。也可以在页面加载后使用 JavaScript 设置 checked 属性。

加载对象时，会触发 onload 事件。onload 最常用于 <body> 元素中，用于在网页全部内容(包括图片、脚本文件、CSS 文件等)加载完成后执行脚本。

示例

在本例中，我们将使用 body 标签中的 onload 事件来调用 init() 函数。init() 函数负责确保复选框在 body 加载时自动选中。它利用"checked"属性来实现这一点。check 函数负责在复选框选中后显示结果，该函数在 init() 函数中调用。

<!DOCTYPE html>
<html>
<head>
    <title> How to auto checked the checkbox and auto display the results when checked </title>
    <style>
        body {
            text-align: center;
            background-color: seashell;
            margin: 50px;
        }
        div {
            padding: 10px;
            height: 150px;
            width: 500px;
            background-color: tomato;
        }
        h3 {
           color: navajowhite;
           font-size: 20px;
        }
        p {
            color: white;
            font-size: 17px;
            font-weight: bold;
        }
        label {
            font-weight: bold;
        }
    </style>
</head>
<body onload= "init()">
    <div>
        <h3> Auto displaying the result when the checkbox is checked: </h3>
        <label for= "checkbox1"> Checkbox: </label> 
        <input type= "checkbox" id= "checkbox1" onclick= "checkFunction()">
        <p id= "text" style= "display: none"> This checkbox is auto checked! </p>
    </div>
    <script>
        function init(){
             var checkBox = document.getElementById("checkbox1");
             checkBox.checked = true;
             checkFunction();
        }
        function checkFunction() {
             var checkBox = document.getElementById("checkbox1");
             var text = document.getElementById("text");
             if (checkBox.checked == true){
                text.style.display = "block";
             } else {
                text.style.display = "none";
             }
        }
    </script>
</body>
</html>

使用 jQuery

JQuery 中的 .prop() 方法仅返回匹配集合中第一个元素的属性值。如果属性值未设置或匹配集合不包含任何元素，则返回 undefined。

示例

在此示例中，我们将使用 jQuery 的 prop 方法获取复选框的 ID，并使用 checked 属性确保复选框在页面加载时自动选中。我们使用与上一个示例相同的函数来显示复选框选中时的结果。

<!DOCTYPE html>
<html>
<head>
    <title> How to auto checked the checkbox and auto display the results when checked </title>
    <style>
        body {
            text-align: center;
            background-color: whitesmoke;
            margin: 50px;
        }
        div {
            padding: 10px;
            height: 130px;
            width: 500px;
            background-color: thistle;
        }
        h3 {
           color: midnightblue;
           font-size: 18px;
        }
        p {
            color: mediumvioletred;
            font-size: 16px;
            font-weight: bold;
        }
        label {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div>
        <h3> Auto displaying the result when the checkbox is checked: </h3>
        <label for= "checkbox1"> Checkbox: </label> 
        <input type= "checkbox" id= "checkbox1" onclick= "checkFunction()">
        <p id= "text" style= "display: none"> This checkbox is auto checked! </p>
    </div>
    <script>
        $('#checkbox1').prop('checked', true);
        checkFunction();
        function checkFunction() 
        {
          if($('#checkbox1').prop("checked") == true)
          {
              $('#text').show();
          }
          else
          {
            $('#text').hide();
          }
        }
    </script>
</body>
</html>