js實現表單項的全選、反選及刪除操作示例
阿新 • • 發佈：2020-06-06
本文例項講述了js實現表單項的全選、反選及刪除操作。分享給大家供大家參考，具體如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>網站會員啟用碼管理</title>
<script language="javascript">
function ReSel(){
for(i=0;i<document.form1.logs.length;i++){ //這一用法只對form表單有效
document.form1.logs[i].checked = true; //如果是實現【全不選】的話，改成false即可
}
}
function SeSel(){
for(i=0;i<document.form1.logs.length;i++){
if(document.form1.logs[i].checked) document.form1.logs[i].checked = false;
else document.form1.logs[i].checked = true;
}
}
function DelSel(){
var nid = getCheckboxItem();
if(nid==""){
alert("請選擇專案!\r\n");
return ;
}
location.href = "member_activation.php?dopost=del&ids="+nid;
}
//獲得選中檔案的檔名
function getCheckboxItem(){
var allSel="";
if(document.form1.logs.value) return document.form1.logs.value;
for(i=0;i<document.form1.logs.length;i++)
{
if(document.form1.logs[i].checked){
if(allSel=="")
allSel=document.form1.logs[i].value;
else
allSel=allSel+"-"+document.form1.logs[i].value;
}
}
//alert(allSel); //1-2-7
return allSel;
}
</script>
</head>
<body background='images/allbg.gif' leftmargin='8' topmargin='8'>
<table width="98%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#cfcfcf">
<tr>
<td>啟用碼列表</td>
</tr>
<tr bgcolor="#FEFCEF" height="30" align="center">
<td width="3%">選擇</td>
<td width="5%">id</td>
<td width="30%">啟用碼</td>
</tr>
<form name="form1">
{dede:datalist}
<tr height="26" align="center" bgcolor="#FFFFFF" onMouseMove="javascript:this.bgColor='#FCFDEE';"
onMouseOut="javascript:this.bgColor='#FFFFFF';"><!--onMouseMove/onMouseOut:滑鼠移動到該行後，被選中的行變色-->
<td><input name='logs' type='checkbox' value='{dede:field.id/}' /></td>
<td>{dede:field.id/}</td>
<td>{dede:field.core/}</td>
</tr>
{/dede:datalist}
</form>
<tr bgcolor="#ffffff">
<td height="36" colspan="9">
<a class="coolbg" onClick="ReSel();" >全選</a>
<a class="coolbg" onClick="SeSel();" >反選</a>
<a class="coolbg" onClick="DelSel();">刪除</a>
</td>
</tr>
</table>
</body>
</html>
member_activation.php
//刪除選定狀態
if($dopost=="del")
{
$ids = explode('-',$ids);
$dquery = "";
foreach($ids as $id)
{
if($dquery=="")
{
$dquery .= "id='$id' ";
}
else
{
$dquery .= " OR id='$id' ";
}
}
if($dquery!="") $dquery = " WHERE ".$dquery;
$dsql->ExecuteNoneQuery("DELETE FROM cr_member_activation $dquery");
ShowMsg("成功刪除指定的記錄！","./index.php");
exit();
}
更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查詢演算法技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript錯誤與除錯技巧總結》
希望本文所述對大家JavaScript程式設計有所幫助。