JS批量删除和全选

由于本人刚接触javascript,理解起来有些吃力,所以如果有不对的地方希望大家提出来,我再加以改正。这次写的主要是针对JS的批量删除和全选。

先说说我对JS的理解吧,javascript是一种脚本语言,它往往不能独立使用,而是配合html/jsp/php/.net等等使用的,它是客户端脚本语言,也就是说,它是给用户们看的,既然是给用户们看的,那么,恰当的应用JS就会增强用户体验效果,让用户们看起来觉得好看,方便,才会愿意去看。程序员做一个程序目的不就是为了让他所做的能够得到更多的人认可么,谁也不想自己做一个网站没人关注。

下面就针对我用JS做的批量删除和全选说一下,我做的是用户列表页,先把数据从数据库里取出来,做成表,这样样就有数据了,我想实现的效果是,当我选N项,点击批量删除的时候,弹出一个对话框,提示”确认删除N项吗?“,点击”确定“按钮,提示”批量删除成功“,点击”取消“按钮,返回当前页面。

首先,加一个“批量删除”的按钮

<input class=”alldel” onclick=”return batchdel()” type=”submit”  value=”批量删除”>  //“onclick”意思是当点击的时候,会触发一个事件,会执行batchdel()这个函数里的内容。

<li><input type=”checkbox”  id=”check” name=”checks[]” value=”<?php echo $row[“id”];?>” ></li>    //我是用复选框实现我想要的效果。”value”=我所选择的id.

然后定义batchdel()函数里的内容

function batchdel()
{
var checkbox = document.getElementsByName(“checks[]”);  //定义一个变量checkbox,找到name为‘checks[]’的元素。
var number = 0;  //初始化一下number
if(checkbox.length != 0)  //判断条件是当选择的个数不为0时
{
for( i = 0; i < checkbox.length; i )  //循环遍历复选框
{
if (checkbox[i].checked == true)  //如果[i]个复选框为选中状态
{
number ;  //累加所选的个数
}
}
if(number == 0)  //如果个数=0,也就是没有选中内容的时候
{
alert(“请选择”);   //弹出一个提示框,提示用户请选择内容

}else
{
var txt=”确定删除这” number “项吗?”;   //定义一个变量txt ,显示内容是确认删除这number项吗?number为几,显示的就是几。
if (confirm(txt))   //判断txt,这里用到的是confirm函数,confirm的意思就是弹出一个带有“确定”和“取消”的提示框。
{
return true;
}
else
{
return false;
}
}
}

}

接下来说JS实现全选和取消全选

我想实现的是点击“全选”按钮的时候,复选框全部是选中状态,同时按钮上的字变成“取消全选”,再点击“取消全选“的时候,复选框全部都是没被选中的状态,同时按钮上的字再变回”全选“。

先定义一个按钮

<input type=”button” id=”all_checked” name=”all_checked” value=”全选” onclick=”checkedAll()” >

再定义checkedAll()

function checkedAll()
{
var allCheckVal = document.getElementById(“all_checked”).value;     //定义变量    allCheckVal = 按钮上的字(“全选”)
var checked = false;
if(allCheckVal == “全选”)  //当按钮上的字为“全选”时
{
document.getElementById(“all_checked”).value = “取消全选”;   //点击变成取消全选
checked = true;   //同时checked值为true
}
else
{
document.getElementById(“all_checked”).value = “全选”;
checked = false;
}

var allcheck=document.getElementsByName(“checks[]”);
for(var i=0;i<allcheck.length;i )
{
allcheck[i].checked = checked;
}
}

因为变量checked只可能有两个值,一个是true,一个是false,当点击’全选‘时,字变’取消全选‘,checked值为true,点击’取消全选‘时,字变’全选‘,checked值为false。