cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk memilih semua dalam javascript

Bagaimana untuk memilih semua dalam javascript

藏色散人
藏色散人asal
2022-01-18 11:26:176535semak imbas

Cara melaksanakan semua-pilihan dalam JavaScript: 1. Buat borang melalui HTML dan CSS 2. Gunakan kaedah DOM untuk mendapatkan elemen "input" bagi semua-pilihan dan pilih-tunggal masing-masing 3. Tetapkan pembolehubah isAllChecked 4. Berikan nilai isAllChecked kepada butang Pilih Semua.

Bagaimana untuk memilih semua dalam javascript

Persekitaran pengendalian artikel ini: sistem Windows 7, versi javascript 1.8.5, komputer Dell G3.

Bagaimana untuk memilih semua menggunakan JavaScript?

Gunakan JS untuk melaksanakan pemilihan penuh dan pemilihan songsang dalam bentuk

Ini juga merupakan latihan, iaitu memilih semua dalam e-dagang umum troli beli-belah, dan tambah pilihan songsang (Nampaknya tidak banyak troli beli-belah dengan fungsi pilihan songsang, tetapi Windows Explorer mempunyai fungsi pilihan songsang)

Bagaimana untuk memilih semua dalam javascript

Mari mulakan dengan memilih semua:

  • Apabila kesemua 4 baris produk ditandakan, "Pilih Semua" ditandakan secara automatik apabila mana-mana produk tidak ditandakan, "Pilih Semua" dibatalkan secara automatik .

  • Apabila semua 4 baris produk tidak ditandakan, tandakan "Pilih Semua" untuk membuat semua 4 baris produk ditandakan

  • Bila "; Pilih Semua" ditandakan, nyahtanda "Pilih Semua" dan semua produk akan dinyahtandai.

Selepas menyusun keperluan, kami mula-mula menggunakan HTML dan CSS untuk melukis borang ini: 

<html>
<head>
    <meta charset="utf-8">
    <title>全选2</title>
    <style type="text/css">     
        .wrap{
            margin-left: 500px;
            margin-top: 200px;
        }
        table{
            border-collapse:collapse;
        }

        th{
            border:1px solid black;
            height: 45px;   
        }

        td{
            border:1px solid black;
            text-align: center;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="wrap">  
        <table cellspacing="0" cellpadding="14">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="selectAll" onclick="funcAll()">
                    </th>
                    <th>商品</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" class="selectOne" onclick="funcOne()">
                    </td>
                    <td>iPhone X</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="selectOne" onclick="funcOne()">
                    </td>
                    <td>iPad pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="selectOne" onclick="funcOne()">
                    </td>
                    <td>iPad air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="selectOne" onclick="funcOne()">
                    </td>
                    <td>Apple watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
        <input type="button" id="backwardOption" value="反选" onclick="funcBackward()">
    </div>
</body>
</html>

Di sini saya ada letakkan acara klik tetikus Fungsi dinamakan, "funcAll()" untuk semua pilihan, "funcOne()" untuk pilihan tunggal dan "funcBackward()" untuk pilihan songsang. Bahagian CSS terutamanya menambah sempadan pada bentuk, dan pada masa yang sama menggabungkan sempadan di persimpangan, yang pada asasnya adalah rupa yang paling mudah.

Mari kita bincangkan tentang keperluan 2 dan 3 dahulu Logiknya agak mudah:

Gunakan kaedah DOM untuk mendapatkan elemen "input" untuk pemilihan penuh dan pemilihan tunggal masing-masing untuk semua pemilihan. Hanya getElementById() (id telah ditetapkan terlebih dahulu), dan terdapat empat pilihan radio Gunakan getElementByClassName() untuk mendapatkannya (kelas telah ditetapkan terlebih dahulu). yang anda dapat ialah array.

Tugaskan elemen yang diperolehi kepada pembolehubah, kemudian gunakan gelung for untuk melintasi tatasusunan, dan tetapkan atribut yang ditanda bagi pembolehubah yang dipilih semua kepada atribut yang disemak bagi setiap pembolehubah yang dipilih tunggal.

Pada ketika ini, 2 dan 3 telah diselesaikan pada masa yang sama Kodnya adalah seperti berikut: 

function funcAll(){
            var selectAll = document.getElementById('selectAll');
            var selectOnes = document.getElementsByClassName('selectOne');
            for (var i = 0; i <p> Seterusnya, mari kita bercakap tentang perkara 1: “Apabila semua 4 baris. produk disemak,” pilih semua "Disemak secara automatik; apabila mana-mana produk tidak ditandakan, "Pilih Semua" dibatalkan secara automatik </p><p>Di sini, status "Pilih Semua" adalah serupa dengan memantau semua butang lain, sekali. terdapat perubahan, perubahan yang sewajarnya. Jadi logik ini perlu ditulis ke dalam acara klik tetikus butang radio setiap baris produk. </p><p>Saya menyediakan pembolehubah isAllChecked sebagai jambatan Keadaan awal mentakrifkan isAllChecked sebagai benar, dan gelung melalui setiap butang radio Setelah dikesan bahawa butang radio tidak ditanda, tetapkan isAllChecked kepada palsu daripada gelung dan tetapkan nilai isAllChecked kepada butang Pilih Semua. </p><p>Dengan cara ini, selagi satu butang radio tidak dipilih, semua pilihan juga akan menjadi tidak dipilih. , kodnya adalah seperti berikut: </p><pre class="brush:php;toolbar:false">function funcOne(){                                                  
            var selectAll = document.getElementById('selectAll');            //函数作用域，所以得再定义一遍
            var selectOnes = document.getElementsByClassName('selectOne');
            var isAllChecked = true;                                        //定义一个变量作为桥梁来控制全选按钮
            for (var i = 0; i <h3>Mari bincang tentang pemilihan songsang</h3><blockquote>
<ol>
<li>Klik butang pilihan songsang, dan status semua butang radio akan diterbalikkan: yang dipilih menjadi tidak dipilih, dan yang tidak dipilih akan menjadi tidak dipilih. </li>
<li>
</ol>Item 1 sebenarnya sangat mudah untuk dilaksanakan Apabila anda mengklik butang songsang, kitar melalui 4 butang radio dan terbalikkan atribut yang diperiksa sepadan dengan setiap elemen. </blockquote><p>Walau bagaimanapun, pemantauan pilih-semua untuk semua item tunggal yang kami laksanakan sebelum ini sebenarnya dilaksanakan dalam acara klik setiap butang radio Maksudnya, jika kami tidak menukar item tunggal dengan mengklik butang radio , Keadaan butang pemilihan, Pilih Semua, sebenarnya tidak dipantau secara global. </p><p>Jadi, kita boleh menulis kod pemantauan ke dalam fungsi klik tetikus songsang Kod akhir adalah seperti berikut: </p><p></p>Kesan akhir adalah seperti berikut: <pre class="brush:php;toolbar:false">            var selectAll = document.getElementById('selectAll');            //函数作用域，所以得再定义一遍
            var selectOnes = document.getElementsByClassName('selectOne');
            for (var i = 0; i <p> </p><p><img src="https://img.php.cn/upload/image/773/281/563/1642476251809927.png" title="1642476251809927.png" alt="Bagaimana untuk memilih semua dalam javascript">Kajian yang disyorkan: "</p>tutorial asas js<p>"<a href="https://www.php.cn/course/list/2.html" target="_blank"></a></p>

Atas ialah kandungan terperinci Bagaimana untuk memilih semua dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html for 循环 class JS 事件 dom input windows
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk melaksanakan pemindahan HTTP fail besar berdasarkan nodejs? (Perkongsian kaedah praktikal)Artikel seterusnya：Bagaimana untuk melaksanakan pemindahan HTTP fail besar berdasarkan nodejs? (Perkongsian kaedah praktikal)

Artikel berkaitan

Lihat lagi