js實現CheckBox全選或者不全選

時間 2019-12-08

原文原文鏈接

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>

<form id="form1" runat="server">
<div>
<input id="Checkbox1" name="all" type="checkbox" onclick="show()"/>全選/取消
<input id="Checkbox2" name="c1" type="checkbox" />1
<input id="Checkbox3" name="c1" type="checkbox" />2
<input id="Checkbox4" name="c1" type="checkbox" />3
<input id="Checkbox6" name="c1" type="checkbox" />4
<input id="Checkbox5" name="c1" type="checkbox" />5
</div>
</form>
</body>
<script>
function show()
{
//根據名字獲取全部checkbox控件
var allCheckBoxs = document.getElementsByName("c1"); html

//半段點擊了全選
if (document.getElementById("Checkbox1").checked == true) {ui

//循環讓全部全選
for (var i = 0; i < allCheckBoxs.length ; i++) {
if (allCheckBoxs[i].type == "checkbox") {
allCheckBoxs[i].checked = true;
}
}
}
//點擊了取消全選
else {
//循環取消全選
for (var i = 0; i < allCheckBoxs.length ; i++) {
if (allCheckBoxs[i].type == "checkbox") {
allCheckBoxs[i].checked = false;
}
}
}
}
</script>
</html>orm

相關標籤/搜索