HTML DOM中的Input Checkbox Value屬性用於設置或返回輸入複選框字段的value屬性的值,但是value屬性的內容不會顯示給用戶。當用戶提交表單時,該值和其他信息將發送到服務器。但是,如果複選框處於未選中狀態,則不會發送任何信息。
用法:
- 它返回“輸入複選框”值屬性。
checkboxObject.value
- 它用於設置“輸入複選框”值屬性。
checkboxObject.value = text
屬性值:它包含單個值文本,該文本用於指定與輸入複選框字段關聯的值。
返回值:它返回一個字符串值,該值表示輸入複選框字段的value屬性的值。
範例1:本示例返回“輸入複選框”值屬性。
<!DOCTYPE html>
<html>
<head>
<title>
DOM Input Checkbox value Property
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;">
GeeksforGeeks
</h1>
<h2>DOM Input Checkbox value Property</h2>
<form >
<!-- Below input elements have attribute
checked -->
<input type="checkbox" name="check" id="GFG"
value="1" checked>Checked by default<br>
<input type="checkbox" name="check" value="2">
Not checked by default<br>
</form> <br>
<button onclick="myGeeks()">
Submit
</button>
<p id="sudo" style="color:green;font-size:30px;"></p>
<!-- script to return Input Checkbox value Property -->
<script>
function myGeeks() {
var g = document.getElementById("GFG").value;
document.getElementById("sudo").innerHTML = g;
}
</script>
</body>
</html>
輸出:
在單擊按鈕之前:
單擊按鈕後:
範例2:本示例設置“輸入複選框”值屬性。
<!DOCTYPE html>
<html>
<head>
<title>
DOM Input Checkbox value Property
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;">
GeeksforGeeks
</h1>
<h2>DOM Input Checkbox value Property</h2>
<form >
<!-- Below input elements have attribute
checked -->
<input type="checkbox" name="check" id="GFG"
value="1" checked>Checked by default<br>
<input type="checkbox" name="check" value="2">
Not checked by default<br>
</form> <br>
<button onclick="myGeeks()">
Submit
</button>
<p id="sudo" style="color:green;font-size:20px;"></p>
<!-- Script to set Input Checkbox value Property -->
<script>
function myGeeks() {
var g = document.getElementById("GFG").value
="Geeks";
document.getElementById("sudo").innerHTML
= "The value of the value attribute"
+ " was change to " + g;
}
</script>
</body>
</html>
輸出:
在單擊按鈕之前:
單擊按鈕後:
支持的瀏覽器:下麵列出了DOM Input Checkbox值屬性支持的瀏覽器:
- 穀歌瀏覽器
- IE瀏覽器
- Firefox
- Opera
- Safari
相關用法
- HTML Input Checkbox用法及代碼示例
- HTML Input Checkbox name用法及代碼示例
- HTML Input Checkbox autofocus用法及代碼示例
- HTML Input Checkbox required用法及代碼示例
- HTML Input Checkbox disabled用法及代碼示例
- HTML Input Checkbox checked用法及代碼示例
- HTML Input Checkbox defaultChecked用法及代碼示例
- HTML Input Checkbox type用法及代碼示例
- HTML Input Checkbox form用法及代碼示例
- HTML input checkbox用法及代碼示例
- HTML Input Checkbox defaultValue用法及代碼示例
- HTML Input URL value用法及代碼示例
- HTML Input URL name用法及代碼示例
- HTML Input Number name用法及代碼示例
- HTML Input Reset value用法及代碼示例
注:本文由純淨天空篩選整理自ManasChhabra2大神的英文原創作品 HTML | DOM Input Checkbox value Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。