数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何自动选中复选框并在选中时自动显示结果
复选框是用<input>标签和type="checkbox"属性（也称为勾选框）创建的。用户可以通过选中一个或多个复选框来选择多个选项。在HTML中，复选框可以单独使用，也可以与“form”属性结合使用。提交问题或表单时，选中复选框的数据将被收集并保存在后端。
<input> 元素的type属性创建它，如下面的语法所示
<input type="checkbox" name="field name" value="Initial 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属性本质上是布尔型的。如果存在，它表示<input>元素在页面加载时应该被预选或选中。checked属性可用于复选框和单选按钮。checked属性也可以在页面加载后使用JavaScript设置。
加载对象时，会发生onload事件。onload最常用于<body>元素中，以便在网页的全部内容加载完毕后（包括图像、脚本文件、CSS文件等）执行脚本。
示例
在这个例子中，我们将使用body标签的onload事件来调用init()函数。init()函数负责确保在body加载时自动选中复选框。它使用“checked”属性来实现。checkfunction负责在选中复选框后显示结果，它在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>
浏览量：1000+
