2. 程式人生 > 其它 >checkbox實現全選和全不選

checkbox實現全選和全不選

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

技術標籤：js

表格全選

功能分析：

1.三個按鈕：全選 全不選 反選
2.滑鼠移入變色，移出復原

在這裡插入圖片描述

<body>
    <from>
    <table cellpadding="12px" cellspacing="0" border="1px">
        <thead>
        <tr>
            <td>
              選框
            </td>
            <
 
td>
                內容
            </td>
        </tr>
        </thead>
        <tbody>
        <tr onmouseover="color(this)" onmouseout="cover(this)" name="tr1" >
            <td><input type="checkbox" name="inp"
 
 value="pubg"></td>
            <td>pubg</td>
        </tr>
        <tr onmouseover="color(this)" onmouseout="cover(this)" name="tr1">
            <td><input type="checkbox" name="inp" value="王者榮耀"
 
></td>
            <td>王者榮耀</td>
        </tr >
        <tr onmouseover="color(this)" onmouseout="cover(this)" name="tr1">
            <td><input type="checkbox" name="inp" value="cs"></td>
            <td>cs</td>
        </tr>
        </tbody>
    </table>
    </from>
<input type="button" name="btn1" value="全選" onclick="selectAll()">
<input type="button" name="btn2" value="全不選" onclick="notSelect()">
    <input type="button" name="btn3" value="反選" onclick="reverses()">
</body>
<script>
    function cover(target) {
        target.style.background="white";
    }
    function  color(target) {

      target.style.background="red";

    }
    function select1() {
        let inpt = document.getElementsByName("inpt");
        if(inpt.checked!=true){
            selectAll()
        }else {
           reverses()
        }
    }

    function selectAll() {
        let inps = document.getElementsByName("inp");
        for (let i = 0; i <inps.length ; i++) {
            inps[i].checked=true;
        }
    }
    function notSelect() {
        let inps = document.getElementsByName("inp");
        for (let i = 0; i <inps.length ; i++) {
            inps[i].checked=false;
        }
    }
    function reverses() {
        let inps = document.getElementsByName("inp");
        for (let i = 0; i <inps.length ; i++) {
            inps[i].checked=!inps[i].checked;
        }
    }
</script>

相關推薦

checkbox實現全選和全不選

技術標籤：js 表格全選 功能分析： 1.三個按鈕：全選 全不選 反選 2.滑鼠移入變色，移出復原

js實現全選和全不選功能

本文例項為大家分享了js實現全選和全不選的具體程式碼，供大家參考，具體內容如下

js實現全選和全不選

本文例項為大家分享了js實現全選和全不選的具體程式碼，供大家參考，具體內容如下

使用React的Hooks+ts實現全選和全不選？

import React, { useState, useEffect } from \'react\'; import { Input, List } from \'antd\'; import Add from \'./Add\';

JavaScript實現全選和全不選操作

本文例項為大家分享了實現全選和全不選操作的具體程式碼，供大家參考，具體內容如下

使用jQuery完成複選框的全選和全不選

要完成這個效果，必然要了解jQuery中對屬性操作的方法： attr()：設定或返回被選元素的屬性值。

Vue購物車（全選和全不選）

技術標籤：VueWeb前端分享一下我的心得vue.jsjs前端 效果如下： <!DOCTYPE html>

html多選框，全選和全不選功能

<!DOCTYPE html> <html> <head> <title></title> </head> <style type=\"text/css\">

TERSUS筆記員工資訊512-Tersus勾選框全選和全不選的三種設定方法(轉載)

轉載地址：https://www.yuque.com/docs/share/652c0886-0f26-4246-9970-f0b926fb7804?# Tersus勾選框全選和全不選的三種設定方法

el-table在ajax分頁時支援單頁全選和全選所有

　　需求：el-table中，ajax分頁的情況下，要支援單頁全選和所有頁全選功能，效果如下圖所示：

Axure 多選和取消多選

實現的效果：點選多選，則預設全選，再次點選，預設子項取消全選狀態； 首先開啟Axure，設定三個多選框；多選組合命名55，選項一組合命名51，選項二組合命名52；

JS實現“全選”和"全不選"功能程式碼例項

這篇文章主要介紹了JS實現“全選”和\"全不選\"功能程式碼例項,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

使用jQuery實現複選框的全選、反選和不選

技術標籤：jqueryjs 使用jQuery實現複選框的全選、反選和不選 通過給按鈕繫結點選事件來控制

Js實現複選框的全選、全不選反選功能程式碼例項

主要是用遍歷的方法查詢元素，然後通過改變checked的屬性來選擇，為true則是選中狀態，為false則是未選狀態

購物車chenckbox的全選 全不選 部分選 反選功能實現

1.data裡面先定義兩個變數，一個是定義總的checkbox，一個是定義列表的checkbox data () {

react實現複選框全選和反選元件效果

本文例項為大家分享了react實現複選框全選和反選元件的具體程式碼，供大家參考，具體內容如下

vue實現簡單全選和反選功能

本文例項為大家分享了vue實現簡單全選和反選的具體程式碼，供大家參考，具體內容如下

vue使用vant中的checkbox實現全選功能

本文例項為大家分享了vue使用vant中的checkbox實現全選功能的具體程式碼，供大家參考，具體內容如下

vue+vant實現購物車全選和反選功能

本文例項為大家分享了vue+vant實現購物車全選和反選的具體程式碼，供大家參考，具體內容如下

JavaScript實現複選框全選和取消全選

JS網頁–全選和取消全選，供大家參考，具體內容如下 表格，初始狀態下複選框都是未選中狀態，選中表頭的複選框後，下面幾個複選框變為選中狀態，取消表頭複選框選中狀態後，下面幾個複選框選中狀態也隨之取消；下面