JavaScript實(shí)現(xiàn)復(fù)選框全選功能

更新時(shí)間：2021年04月11日 15:14:12 作者：KathyLJQ

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)復(fù)選框全選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)復(fù)選框全選的具體代碼，供大家參考，具體內(nèi)容如下

代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 300px;
            border-spacing: 0;
            /* text-align: center; */
            margin: 100px auto;
            border-collapse: collapse;
        }
        
        table tr:nth-child(n+2)>td {
            text-align: left;
            background-color: rgb(250, 245, 245);
            color: dimgray;
            font-size: 14px;
        }
        
        table tr:nth-child(1) {
            background-color: skyblue;
            color: white;
        }
        
        th,
        td {
            padding: 10px;
            border: 0.5px solid gray;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th><input type="checkbox" name="" id="all"></th>
            <th>商品</th>
            <th>價(jià)格</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="" id="ip8"></td>
            <td>iPhone8</td>
            <td>8000</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="" id="pro"></td>
            <td>iPad Pro</td>
            <td>5000</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="" id="air"></td>
            <td>iPad Air</td>
            <td>2000</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="" id="watch"></td>
            <td>Apple Watch</td>
            <td>2000</td>
        </tr>
    </table>

    <script>
        var all = document.getElementById('all');
        var items = document.querySelectorAll('tr>td>input');
        all.onclick = function() {
            for (var i = 0; i < items.length; i++) {
                items[i].checked = this.checked;
            }
        }


        for (var i = 0; i < items.length; i++) {
            items[i].onclick = function() {
                var flag_all = 1;
                for (var j = 0; j < items.length; j++) {
                    if (items[j].checked == 0) {
                        flag_all = 0;
                        all.checked = flag_all;
                        break;
                    }
                }
                all.checked = flag_all;
            }
        }
    </script>
</body>

</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Javascript 判斷是否存在函數(shù)的方法
Javascript 判斷是否存在函數(shù)，此功能如何實(shí)現(xiàn)，接下來為您介紹解決方法，需要了解的朋友可以參考下
2013-01-01
JS實(shí)現(xiàn)添加,替換,刪除節(jié)點(diǎn)元素的方法
這篇文章主要介紹了JS實(shí)現(xiàn)添加,替換,刪除節(jié)點(diǎn)元素的方法,實(shí)例分析了javascript針對節(jié)點(diǎn)元素的替換、刪除及常用的幾種添加技巧,需要的朋友可以參考下
2016-06-06
JS+HTML+CSS實(shí)現(xiàn)輪播效果
這篇文章主要為大家詳細(xì)介紹了JS+HTML+CSS實(shí)現(xiàn)輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
TypeScript 數(shù)組Array操作的常用方法
本文主要介紹了TypeScript 數(shù)組Array操作的常用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
ES6如何用一句代碼實(shí)現(xiàn)函數(shù)的柯里化
這篇文章主要介紹了ES6如何用一句代碼實(shí)現(xiàn)函數(shù)的柯里化，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
JavaScript節(jié)點(diǎn)及列表操作實(shí)例小結(jié)
這篇文章主要介紹了JavaScript節(jié)點(diǎn)及列表操作的方法,以實(shí)例的形式較為詳細(xì)的總結(jié)了javascript針對節(jié)點(diǎn)操作的相關(guān)技巧,并給出了一個(gè)完整的節(jié)點(diǎn)操作方法實(shí)例總結(jié),需要的朋友可以參考下
2015-08-08
使用ef6創(chuàng)建oracle數(shù)據(jù)庫的實(shí)體模型遇到的問題及解決方案
這篇文章主要介紹了使用ef6創(chuàng)建oracle數(shù)據(jù)庫的實(shí)體模型遇到的問題及解決方案,需要的朋友可以參考下
2017-11-11
javascript實(shí)現(xiàn)炫酷的拖動(dòng)分頁
非常酷的javascript拖動(dòng)分頁功能，無縫循環(huán)分頁，拖動(dòng)鼠標(biāo)即可完成分頁，鼠標(biāo)向左拖動(dòng)回到前一頁，向右拖動(dòng)則翻開第二頁，還帶有動(dòng)畫特效，著實(shí)很不錯(cuò)，界面黑色，非主流風(fēng)格，相信很多人會(huì)喜歡的。
2015-05-05
knockoutjs模板實(shí)現(xiàn)樹形結(jié)構(gòu)列表
這篇文章主要介紹了knockoutjs模板實(shí)現(xiàn)樹形結(jié)構(gòu)列表的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-07-07
js實(shí)現(xiàn)拖拽與碰撞檢測
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)拖拽與碰撞檢測，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09