我要做的效果就是當我們打開頁面時就自動把所有checkbox選中,原理是:先獲取所有type為\'input \'的元素,然後各全選的那個選項添加點擊事件。如果全選項被經被選中,則通過循環使得每個元素的\'checked\'屬性變為true,否則變成false.
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教程吧,有需要的朋友可學習交流。