萬盛學電腦網 >> 網絡編程 >> php編程 >> javascrip全選效果之學習筆記
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獲取剛剛插入數據的ID值
php編程排行
程序編程推薦
相關文章
- 利用Navicat for MySQL工具備份、還原MySQL數據庫
- Navicat for MySQL管理Linux VPS數據庫兩處連接報錯問題
- MySQL主從配置中RESET SLAVE和RESET MASTER的區別詳解
- mysql主從配置之slave_exec_mode=IDEMPOTENT詳解
- navicat for mysql安裝與基本使用圖解
- MySQL主從復制報錯slave have equal MySQL server…
- mysql提示Incorrect string value: ‘\xF0\x9F…
- MYSQL的master/slave數據同步配置的例子
- MySQL 搭建主從同步，從報 Slave can not handle rep…
- mysql中having和group by命令使用詳解
- mysql優化之status和variables對比
