javascrip全选效果之学习笔记
document.getElementById(' ')是某个元素的id特性来获取某个指定的元素，返回的是一个对象。document.getElementById(' ') 是根据控件TAG（type属性）获取这个控件对象，返回的是一个对象数组；
要实现一个全选的效果，得先定义一组选项。
| 代码如下 |
复制代码 |
|
<body>
<p id="btn"><input id="hk" type="checkbox" />全选</p>
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
</body>
|
接下利用Javascript来实现效果。教程中的效果是只能点全选时全部选中，如果再点全选就不能全部反选，这里我通过自己的理解，加入了这个功能
| 代码如下 |
复制代码 |
|
<script type="text/javascript">
window.onload=function(){
var oInput=document.getElementsByTagName('input')
var ohk=document.getElementById('hk')
ohk.onclick=function(){
var i=0;
if(ohk.checked==true){
for(i=0;i<oInput.length;i++)
{
oInput[i].checked=true;
}
}
else
{
for(i=0;i<oInput.length;i++)
{
oInput[i].checked=false;
}
}
};
};
</script>
|
个人感觉此种方法还是有所欠缺，他会将页面中所有的类型为input的选中.现在我们写了一个利用点击事件来进行全选也反选效果。
| 代码如下 |
复制代码 |
|
<meta charset="utf-8">
<script language="javascript">
function selectAll()
{
obj=document.getElementsByName('range');
for(var i=0;i<obj.length;i++)
{
//document.form1.range[i].checked=true;
obj.item(i).checked=true;
}
}
function unSelect()
{
obj=document.getElementsByName('range');
for(var i=0;i<obj.length;i++)
{
if(obj.item(i).checked)
{
obj.item(i).checked=false;
}
else
{
obj.item(i).checked=true;
}
}
}
</script>
<form name="form1" >
<input type="checkbox" value="1" name="range">1<br>
<!--
<input type="checkbox" value="3" name="range">3<br>
<input type="checkbox" value="4" name="range">4<br>
<input type="checkbox" value="5" name="range">5<br> -->
<input type="button" value="全选" onclick="selectAll();">
<input type="button" value="反选" onclick="unSelect();">
</form>
|
这样如果结合php程序也实现删除功能我们只需要把获取的字符串以post或get方式提供就可以了，下面来看get方式提供。
| 代码如下 |
复制代码 |
|
//批量删除
//na 是name
function checkSubmit(na,url)
{
var str = '';
for(var i=0;i < document.getElementsByName(na).length;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教程吧，有需要的朋友可学习交流。
补充：Php教程,Php入门
