2. 程式人生 > >js實現全選與反選

js實現全選與反選

阿新 • • 發佈：2019-01-19

checkbox的全選與反選，有時候還是會遇到的，這裡做下分享，如有不足之處，請加以指出

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>全選與反選</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }


        .ups {
            width: 300px;
            margin: 100px auto 0;
        }


        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }


        th,
        td {
            border: 1px solid #d0d0d0;
            color: #414061;
            padding: 10px;
        }


        th {
            background-color: red;
            font: bold 16px "微軟雅黑";
            color: #fff;
        }


        td {
            font: 14px "微軟雅黑";
        }


        tbody tr {
            background-color: #f0f0f0;
        }


        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>
<body>
<div class="ups">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="first"/>
            </th>
            <th>name</th>
            <th>age</th>
            <th>sex</th>
        </tr>
        </thead>
        <tbody id="ones">
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>zs</td>
            <td>ls</td>
            <td>ww</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>zs</td>
            <td>ls</td>
            <td>ww</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>zs</td>
            <td>ls</td>
            <td>ww</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>zs</td>
            <td>ls</td>
            <td>ww</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
<script type="text/javascript">
    var all = document.getElementById('first');
    var body = document.getElementById('ones');
    var checkboxs = body.getElementsByTagName('input');
    //上面的選中了，下面的就都選中，上面的不選中，下面的就不選中
    all.onclick = function () {
        for(var i=0;i<checkboxs.length;i++){
            checkboxs[i].checked = all.checked;
        }
    }
    //點選下面的每一個checkboxs都要做判斷，如果都選中了，就選中，否則就不選中
    for(var i=0;i<checkboxs.length;i++){
        checkboxs[i].onclick = function () {
            var checkedAll = true;//假如都選中了
            for(var i=0;i<checkboxs.length;i++){
                if(!checkboxs[i].checked){
                    checkedAll = false;
                    break;//沒有選中就返回
                }
            }
            all.checked = checkedAll;
        }
    }
</script>
</html>

相關推薦

個人js學習例項-點選按鈕實現全選與反選，及封裝函式呼叫前後

原始： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid

js實現全選與反選

checkbox的全選與反選，有時候還是會遇到的，這裡做下分享，如有不足之處，請加以指出<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR

jQuery 實現複選框的全選與反選

<script> //實現全選與反選 $(".allAndNotAll").click(function () { if ($(this).prop("checked")) { $("input[

用angular實現多選按鈕的全選與反選

在頁面中我們常常會遇到多選框，例如購物車裡的商品下面用angular來實現這一功能 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

DOM操作案例之--全選與反選

doc .cn 單選 bre ont light margin break wid 全選與反選在表單類的項目中還是很常見的，電商項目中的購物車一定少不了這個功能。 下面我只就用一個簡單的案例做個演示吧。 <div class="wrap"> <t

全選與反選添加

數據 obj 網絡請求 checkbox 排序 jquery pac book inner <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <script

jquery的全選與反選

效果圖prop方法prop() 方法設定或返回被選元素的屬性和值。當該方法用於返回屬性值時，則返回第一個匹配元素的值。當該方法用於設定屬性值時，則為匹配元素集合設定一個或多個屬性/值對。注意：prop() 方法應該用於檢索屬性值，例如 DOM 屬性（如 selectedInd

javascript 全選與反選

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

vue中復選框全選與反選

事件 狀態 dex 主要部分 過濾 lis 反選 觸發事件 value 　　html主要部分：　 <template v-for="(item, index) in checkboxList"> 　　<input type="checkbox" v

Android 購物車（精仿）可刪可全選與反選

展示效果 主Activity中的方法 public class MainActivity extends Activity implements ShopcartExpandableListViewAdapter.CheckInterface,

js實現復選框的全選、全部選和反選

item itl true mon 復選框 loading 實現 align inpu 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta chars

利用js實現全、反選、全不選功能(check)

box tag 實現 所有 利用 .get 乒乓球 獲取 get <!DOCTYPE html><html><head><meta charset="utf-8"/><title></ti

利用js實現全選、反選、全不選(button)

put () false 全選 charset btn tel pre fun <!DOCTYPE html><html><head><meta charset="utf-8"/><title>

純js實現checkbox的全選、反選、全不選

純js實現checkbox的全選、反選、分開：a. 代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> &l

jQuery js實現checkbox復選框全選、全不選、反選 PHP

實現 com check set false jquer display value round <!doctype html> <html lang="en"> <head> <meta charset="

js實現複選框的多選，全選，反選

多選，全選，反選 js實現複選框的多選，全選，反選 js實現複選框的多選，全選，反選 <table> <thead> <tr> <th><input type="checkbox"

vue.js實現全選 和反選

自己學習vue的一個小例子： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script

利用js實現複選框的全選和反選

<!DOCTYPE html> <html> <head>     <title>142</title>     <meta charset="utf-8">     <script type="t

js複選框實現全選、全不選、反選

通過input就可以將一個簡單的複選框呈現在頁面上 <input type="checkbox" /> 要實現的大概就是這樣一個頁面 思路 全選 因為要得到複選框陣列，而id又不能重複。所以通過name來得到複選框陣列。得到陣列後遍歷，將

JS實現全選與全不選

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>隔行換色</title><script>function  chanclo(){//獲取標籤var arr= d