Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung der JavaScript-Funktionen „Alles auswählen' und „Auswahl umkehren' (mit Codebeispielen)

藏色散人
Freigeben: 2022-08-06 13:48:02
nach vorne
2017 Leute haben es durchsucht

Dieser Artikel stellt vor, wie natives js die Funktionen zum Auswählen aller und zum Umkehren der Auswahl implementiert. Ich hoffe, dass er Freunden in Not hilfreich sein wird!

Idee: Zuerst holen wir uns den Knoten

		遍历每个节点 获取到checked的属性
		然后我们通过改变checked的属性改变选中的状态
		全选的时候我们让他们都为true 
		反选的时候我们使用!达到效果
Nach dem Login kopieren

Detaillierte Erläuterung der JavaScript-Funktionen „Alles auswählen und „Auswahl umkehren (mit Codebeispielen)

Die diesmal verwendeten Wissenspunkte sind:

document.getElementsByName(‘name属性’):选中所有的name为name属性的的元素节点对象
document.getElementById('id名称'): 通过id名称获取一个元素节点对象
onclick:鼠标点击事件
Nach dem Login kopieren

html-Teil:

<input> 全选
<input>足球
<input>篮球
<input>羽毛球
<input>反选
Nach dem Login kopieren

js-Teil

var items = document.getElementsByName('items');
var quan = document.getElementById('quan');
var fan = document.getElementById('fan');

function fan1(){
    var index = 0;
    for(var i =0;i<items.length quan.onclick="function(){" fan.onclick><p><img src="https://img.php.cn/upload/article/000/000/020/a37a80b3c1cd10f0bf97587d1908c868-1.png" alt="Detaillierte Erläuterung der JavaScript-Funktionen „Alles auswählen und „Auswahl umkehren (mit Codebeispielen)"> </p>
<p>Verwandte Empfehlungen :【<a href="//m.sbmmt.com/course/list/17.html" target="_blank">JavaScript-Video-Tutorial</a>】</p>
<link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-22a2fefd3b.css" rel="stylesheet">
<link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-4f8fbf9108.css" rel="stylesheet"></items.length>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der JavaScript-Funktionen „Alles auswählen' und „Auswahl umkehren' (mit Codebeispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!