原生JS實現購物車全選多選按鈕功能

時間 2020-05-08

原文原文鏈接

對於JS初學者來講，一個完整的購物車實現仍是挺難的，邏輯功能挺多。寫出完整功能，能提高很多JS基礎，下面實現購物車全選多選按鈕功能：html

首先HTML及CSS部分：this

<style> table { border-collapse: collapse; } td { border: 1px solid #000000; width: 100px; height: 30px; text-align: center; } </style>

    <body>
        <table>
            <tr>
                <td>
                    <label for="allCheck">全選</label><br><input id="allCheck" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input id="check0" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input id="check1" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input id="check2" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input id="check3" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input id="check4" type="checkbox">
                </td>
            </tr>
        </table>

而後是JS部分：spa

<script>
            var allcheck = document.getElementById("allCheck")　　//獲取全選框 allcheck.addEventListener("click",clickHandler)　　　　//給全選框按鈕添加點擊屬性 for(var i=0;i<5;i++){ var check = document.getElementById("check"+i)　　//遍歷每一個多選按鈕 check.addEventListener("click",clickHandler);　　　　//給每一個多選框添加點擊屬性 } function clickHandler(){ if(allcheck === this){　　　　//進行判斷 若是你點擊的是全選按鈕 那麼多選按鈕也就所有被選中 for(var i=0;i<5;i++){ var check = document.getElementById("check"+i);　　　　 check.checked = allcheck.checked; } return;　　　//結束 } for(var j=0;j<5;j++){ var checks = document.getElementById("check"+j); if(!checks.checked){　　　　這一部分代碼用來多選按鈕是否被選中 遍歷全部的多選按鈕 若是有一個多選按鈕沒有被選中 那麼全選按鈕就不會被選中 allcheck.checked = false; return;　　　　//結束 } } allcheck.checked = true;　　　　//很差理解 看不懂能夠一步一步運行代碼
 } </script>

所有代碼：code

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

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style> table { border-collapse: collapse; } td { border: 1px solid #000000; width: 100px; height: 30px; text-align: center; } </style>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <label for="allCheck">全選</label><br><input id="allCheck" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input id="check0" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input id="check1" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input id="check2" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input id="check3" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input id="check4" type="checkbox">
                </td>
            </tr>
        </table>
        <script>
            var allcheck = document.getElementById("allCheck") allcheck.addEventListener("click",clickHandler) for(var i=0;i<5;i++){ var check = document.getElementById("check"+i) check.addEventListener("click",clickHandler); } function clickHandler(){ if(allcheck === this){ for(var i=0;i<5;i++){ var check = document.getElementById("check"+i); check.checked = allcheck.checked; } return; } for(var j=0;j<5;j++){ var checks = document.getElementById("check"+j); if(!checks.checked){ allcheck.checked = false; return; } } allcheck.checked = true;
 } </script>
    </body>
</html>

效果以下：htm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。