Rumah  >  Artikel  >  hujung hadapan web  >  Penjelasan terperinci tentang fungsi JavaScript untuk memilih semua dan menyongsangkan pemilihan (dengan contoh kod)

Penjelasan terperinci tentang fungsi JavaScript untuk memilih semua dan menyongsangkan pemilihan (dengan contoh kod)

藏色散人
藏色散人ke hadapan
2022-08-06 13:48:022058semak imbas

Artikel ini akan memperkenalkan cara native js melaksanakan fungsi memilih semua dan menyongsangkan pemilihan saya harap ia akan membantu rakan yang memerlukan!

Idea: Mula-mula kita dapatkan nod

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

Penjelasan terperinci tentang fungsi JavaScript untuk memilih semua dan menyongsangkan pemilihan (dengan contoh kod)

Mata pengetahuan yang digunakan kali ini ialah:

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

bahagian html:

<input> 全选
<input>足球
<input>篮球
<input>羽毛球
<input>反选

bahagian js

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="Penjelasan terperinci tentang fungsi JavaScript untuk memilih semua dan menyongsangkan pemilihan (dengan contoh kod)"></p>
<p>Cadangan berkaitan: [<a href="https://www.php.cn/course/list/17.html" target="_blank">Tutorial video 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>

Atas ialah kandungan terperinci Penjelasan terperinci tentang fungsi JavaScript untuk memilih semua dan menyongsangkan pemilihan (dengan contoh kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:csdn.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam