Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée des fonctions JavaScript de sélection de tout et d'inversion de la sélection (avec des exemples de code)

藏色散人
Libérer: 2022-08-06 13:48:02
avant
2034 Les gens l'ont consulté

Cet article présente comment Native Js implémente les fonctions de sélection de tout et d'inversion de la sélection. J'espère qu'il sera utile aux amis dans le besoin !

Idée : Nous obtenons d'abord le nœud

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

Explication détaillée des fonctions JavaScript de sélection de tout et dinversion de la sélection (avec des exemples de code)

Les points de connaissance utilisés cette fois sont :

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

partie html :

<input> 全选
<input>足球
<input>篮球
<input>羽毛球
<input>反选
Copier après la connexion

js part

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="Explication détaillée des fonctions JavaScript de sélection de tout et dinversion de la sélection (avec des exemples de code)"> </p>
<p>Recommandations associées :【<a href="//m.sbmmt.com/course/list/17.html" target="_blank">Tutoriel vidéo JavaScript</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>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!