全选，不选和反选功能
复选框的全选，反选和不选主要应用JavaScript脚本，通过自定义函数完成。
（1）在通过JavaScript脚本中的自定义函数完成复选框的全选，反选和不选功能中，应用的第一个方法是getElementsByTagName，
获取制定标签的名称，返回值为一个包含标签信息的object。
（2）根据getElementsByTagName标签返回的对象，判断标签类型（type）的值是否是checkbox。
（3）当标签类型type的值为checkbox时，为标签中的checkbox赋值。当checked的值为TRUE时，将其赋值为FALSE;当checked的值为FALSE时，
将其赋值为TRUE.
<html>
<meta charset="utf-8"/>
<head>
</head>
<body>
<form method="post" name="form1" id="form1" action="">
<tr>
<td width="62" align="center"><input type="checkbox" name="conn_id_1" id="conn_id_1" value="1"/></td>
<td>东邪</td>
<td>PHP</td>
<td>部门经理</td>
<td>29</td>
</tr>
<br/><br/>
<tr>
<td width="62" align="center"><input type="checkbox" name="conn_id_2" id="conn_id_2" value="1"/></td>
<td>西毒</td>
<td>JAVA</td>
<td>部门经理</td>
<td>29</td>
</tr>
<br/><br/>
<tr>
<td width="62" align="center"><input type="checkbox" name="conn_id_3" id="conn_id_3" value="1"/></td>
<td>南帝</td>
<td>VB</td>
<td>部门经理</td>
<td>29</td>
</tr>
<br/><br/>
<tr>
<td width="62" align="center"><input type="checkbox" name="conn_id_4" id="conn_id_4" value="1"/></td>
<td>北丐</td>
<td>ASP</td>
<td>部门经理</td>
<td>29</td>
</tr>
<br/><br/>
<tr>
<input type="button" onclick="uncheckAll(form1,status)" value="不选">
<input type="button" onclick="checkAll(form1,status)" value="全选">
<input type="button" onclick="switchAll(form1,status)" value="反选">
</tr>
</form>
<script>
function uncheckAll(form1,status){ //不选
var elements = document.getElementsByTagName('input'); //获取input标签
for(var i=0;i<elements.length;i++){ //根据标签的长度执行循环
if(elements[i].type == 'checkbox'){ //判断对象中元素的类型
if(elements[i].checked==true){ //判断当checked的值为TURE时
elements[i].checked=false; //将checked赋值为FALSE
}
}
}
}
function checkAll(form1,status){ //全选
var elements = document.getElementsByTagName('input');
for(var i=0;i<elements.length;i++){
if(elements[i].type == 'checkbox'){
if(elements[i].checked==false){
elements[i].checked=true;
}
}
}
}
function switchAll(form1,status){ //反选
var elements = document.getElementsByTagName('input');
for(var i=0;i<elements.length;i++){
if(elements[i].type == 'checkbox'){
if(elements[i].checked==true){
elements[i].checked=false;
}else if(elements[i].checked==false){
elements[i].checked=true;
}
}
}
}
</script>
</body>
</html>
neue Datei
<html>
<meta charset="utf-8"/>
<head>
</head>
<body>
<form method="post" name="form1" id="form1" action="">
<tr>
<td width="62" align="center"><input type="checkbox" name="conn_id_1" id="conn_id_1" value="1"/></td>
<td>东邪</td>
<td>PHP</td>
<td>部门经理</td>
<td>29</td>
</tr>
<br/><br/>
<tr>
<td width="62" align="center"><input type="checkbox" name="conn_id_2" id="conn_id_2" value="1"/></td>
<td>西毒</td>
<td>JAVA</td>
<td>部门经理</td>
<td>29</td>
</tr>
<br/><br/>
<tr>
<td width="62" align="center"><input type="checkbox" name="conn_id_3" id="conn_id_3" value="1"/></td>
<td>南帝</td>
<td>VB</td>
<td>部门经理</td>
<td>29</td>
</tr>
<br/><br/>
<tr>
<td width="62" align="center"><input type="checkbox" name="conn_id_4" id="conn_id_4" value="1"/></td>
<td>北丐</td>
<td>ASP</td>
<td>部门经理</td>
<td>29</td>
</tr>
<br/><br/>
<tr>
<input type="button" onclick="uncheckAll(form1,status)" value="不选">
<input type="button" onclick="checkAll(form1,status)" value="全选">
<input type="button" onclick="switchAll(form1,status)" value="反选">
</tr>
</form>
<script>
function uncheckAll(form1,status){ //不选
var elements = document.getElementsByTagName('input'); //获取input标签
for(var i=0;i<elements.length;i++){ //根据标签的长度执行循环
if(elements[i].type == 'checkbox'){ //判断对象中元素的类型
if(elements[i].checked==true){ //判断当checked的值为TURE时
elements[i].checked=false; //将checked赋值为FALSE
}
}
}
}
function checkAll(form1,status){ //全选
var elements = document.getElementsByTagName('input');
for(var i=0;i<elements.length;i++){
if(elements[i].type == 'checkbox'){
if(elements[i].checked==false){
elements[i].checked=true;
}
}
}
}
function switchAll(form1,status){ //反选
var elements = document.getElementsByTagName('input');
for(var i=0;i<elements.length;i++){
if(elements[i].type == 'checkbox'){
if(elements[i].checked==true){
elements[i].checked=false;
}else if(elements[i].checked==false){
elements[i].checked=true;
}
}
}
}
</script>
</body>
</html>
Vorschau
Clear
- Kursempfehlungen
- Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit
Auch Studierende, die diesen Kurs gesehen haben, lernen
Lassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen
Kurze Einführung in die Web-Frontend-Entwicklung
Umfangreiche, praktische Tianlongbabu-Entwicklung eines Mini-Version-MVC-Frameworks, das die Enzyklopädie-Website mit peinlichen Dingen imitiert
Erste Schritte mit der praktischen PHP-Entwicklung: Schnelle PHP-Erstellung [Small Business Forum]
Anmeldebestätigung und klassisches Message Board
Wissenssammlung über Computernetzwerke
Schnellstart-Node.JS-Vollversion
Der Frontend-Kurs, der Sie am besten versteht: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Schreiben Sie Ihr eigenes PHP-MVC-Framework (40 Kapitel ausführlich/große Details/Muss gelesen werden, damit Neulinge vorankommen)