搜尋
首頁php教程php手册javascrip全选效果之学习笔记

javascrip全选效果之学习笔记

Jun 13, 2016 am 10:16 AM
javascrip全選學習我們打開效果筆記自動頁面

我要做的效果就是当我们打开页面时就自动把所有checkbox选中,原理是:先获取所有type为\'input \'的元素,然后各全选的那个选项添加点击事件。如果全选项被经被选中,则通过循环使得每个元素的\'checked\'属性变为true,否则变成false.

document.getElementById(' ')是某个元素的id特性来获取某个指定的元素,返回的是一个对象。document.getElementById(' ') 是根据控件TAG(type属性)获取这个控件对象,返回的是一个对象数组;

要实现一个全选的效果,得先定义一组选项。

 代码如下 复制代码


 

全选


    

    

    

    

    

    

    

 

接下利用Javascript来实现效果。教程中的效果是只能点全选时全部选中,如果再点全选就不能全部反选,这里我通过自己的理解,加入了这个功能

 代码如下 复制代码

个人感觉此种方法还是有所欠缺,他会将页面中所有的类型为input的选中.现在我们写了一个利用点击事件来进行全选也反选效果。

 代码如下 复制代码




1





这样如果结合php程序也实现删除功能我们只需要把获取的字符串以post或get方式提供就可以了,下面来看get方式提供。

 代码如下 复制代码

//批量删除   
//na 是name  
function checkSubmit(na,url)
{
 
    var str = '';
    for(var i=0;i     {
          if(document.getElementsByName(na)[i].checked){
            if(str=='') str += document.getElementsByName(na)[i].value;
            else str += ',' + document.getElementsByName(na)[i].value;
          }
    }
    if(str=='')
    {
        alert('你没选择任何内容!');
        return false;
    }
    else
    {
        location=url+"?id="+str+"&action=delall";
    }
}

在php程序中我们就要以

 代码如下 复制代码

$a = $_GET['id'];

然后利用where id in( $a ) 即可实现删除了哦,这也算是一简单php教程吧,有需要的朋友可学习交流。

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前By尊渡假赌尊渡假赌尊渡假赌
威爾R.E.P.O.有交叉遊戲嗎?
1 個月前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具