資料結構
網路
關係資料庫管理系統 (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+
