jquery復選框選中及下拉框選中指定項(刪除項)

1）復選框選中及下拉框選中指定項(刪除項)

．技術分析

復選框的全選、反選和不選其主要應用JavaScript腳本，通過自定義函數完成。

（1）在通過JavaScript腳本中的自定義函數完成復選框的全選、反選和不選功能中，應用的第一個方法是：

getElementsByTagName，獲取指定標簽的名稱，返回值為一個包含標簽信息的object。

（2）根據getElementsByTagName標簽返回的對象，判斷標簽類型（type）的值是否是checkbox。

（3）當標簽類型type的值為checkbox時，為標簽中的checked賦值。當checked的值為true時，為它賦值為false；當checked的值為false時，為它賦值為true。

（4）在頁面中通過script標簽調用js文件夾下的文件，應用onClick事件調用自定義函數，完成全選、反選和不選功能的實現。

應用實例

在本示例中實現復選框的全選、反選和不選功能。其具體步驟如下：

（1）創建js文件夾，編寫reg.js腳本文件。在reg.js中，編寫自定義函數，實現全選、反選和不選功能。reg.js文件的關鍵代碼如下：

function uncheckAll(form1,status) { //不選
    var elements=form1.getElementsByTagName('input'); //獲取input標簽
    for(var i=0; i<elements.length; i++){ //根據標簽的長度執行循環
        if(elements[i].type=='checkbox') { //判斷對象中元素的類型
            if(elements[i].checked==true){ //判斷當checked的值為true時
                elements[i].checked=false; //為checked賦值為false
            }
        }
    }
}
function checkAll(form1,status){ //全選
    var elements=form1.getElementsByTagName('input');
    for(var i=0; i<elements.length; i++){
        if(elements[i].type=='checkbox') {
            if(elements[i].checked==false){
                elements[i].checked=true;
            }
        }
    }
}
function switchAll(form1,status) { //反選
    var elements=form1.getElementsByTagName('input');
    for(var i=0; i<elements.length; i++){
        if(elements[i].type=='checkbox'){
            if(elements[i].checked==true){
                elements[i].checked=false;
            }else if(elements[i].checked==false){
                elements[i].checked=true;
            }
        }
    }
}

（2）創建index.php頁面，輸出會員信息，并添加圖像按鈕，通過onClick事件調用JavaScript自定義函數實現全選、反選、不選和刪除的功能。其關鍵代碼如下：

<script language="javascript" src="js/reg.js"></script>
<form method="post" name="form1" id="form1" action="index_ok.php">
<tr>
<td width="62" align="center"><input name="conn_id[]" type="checkbox" id="conn_id[]" value="1" /></td>
<td width="242"><?php echo $myrow[id];?></td>
<td width="243"><?php echo $myrow[user];?></td>
<td width="485"><?php echo $myrow[pass];?></td>
<td width="485"><?php echo $myrow[dates];?></td>
</tr>
<tr>
<td colspan="5" align="center"><!--通過onClick事件調用自定義函數，執行相應的操作-->
<img src="images/bg_19-20.jpg" onclick="checkAll(form1,status)" width="62" height="25" />
<img src="images/bg_14-14.jpg" onclick="switchAll(form1,status)" width="62" height="25" />
<img src="images/bg_07-08.jpg" width="62" height="25" onclick="uncheckAll(form1,status)" />
<input type="image" name="imageField" src="images/bg_14.jpg" />
</td>
</tr>
</form>

第二種方法：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script type="text/javascript">
window.onload=function(){
var oInput=document.getElementsByName("hobby");
var oBtn1=document.getElementById("select_all");
oBtn1.onclick=function(){
for(var i=0;i<oInput.length;i++){
oInput[i].checked=true;
}
}
var oBtn2=document.getElementById("no_all");
oBtn2.onclick=function(){
for(var i=0;i<oInput.length;i++){
oInput[i].checked=false;
}
}
var oBtn3=document.getElementById("fanxuan");
oBtn3.onclick=function(){
for(var i=0;i<oInput.length;i++){
oInput[i].checked=!oInput[i].checked;
}
}

}
</script>
</head>
<body>
游泳：<input type="checkbox" name="hobby" checked="checked" /><br/>
打球：<input type="checkbox" name="hobby" /><br/>
下棋：<input type="checkbox" name="hobby" /><br/>
打魔獸：<input type="checkbox" name="hobby" /><br/>
打麻將：<input type="checkbox" name="hobby" /><br/>
打豆豆：<input type="checkbox" name="hobby" /><br/>
<input type="button" value="全選" id="select_all" />
<input type="button" value="全不選" id="no_all"/>
<input type="button" value="反選" id="fanxuan"/>
</body>
</html>

第三種方法：

用鼠標選擇單個元素或一組元素。

如需了解更多有關 selectable 交互的細節，請查看 API 文檔可選擇小部件（Selectable Widget）。

默認功能

在某個 DOM 元素上或者一組元素上啟用 selectable 功能。通過鼠標拖拽選擇條目。按住 Ctrl 鍵，選擇多個不相鄰的條目。

<!doctype html><html lang="en"><head>
 <meta charset="utf-8">
 <title>jQuery UI 選擇（Selectable） - 默認功能</title>
 <link rel="stylesheet" >
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <link rel="stylesheet" >
 <style>
 #feedback { font-size: 1.4em; }
 #selectable .ui-selecting { background: #FECA40; }
 #selectable .ui-selected { background: #F39814; color: white; }
 #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
 #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
 </style>
 <script>
 $(function() {
 $( "#selectable" ).selectable();
 });
 </script></head><body>
<ol id="selectable">
 <li class="ui-widget-content">Item 1</li>
 <li class="ui-widget-content">Item 2</li>
 <li class="ui-widget-content">Item 3</li>
 <li class="ui-widget-content">Item 4</li>
 <li class="ui-widget-content">Item 5</li>
 <li class="ui-widget-content">Item 6</li>
 <li class="ui-widget-content">Item 7</li></ol>
</body></html>

顯示為網格

讓 selectable 條目顯示為網格，使用 CSS 使得它們帶有相同的尺寸且浮動顯示。

<!doctype html><html lang="en"><head>
 <meta charset="utf-8">
 <title>jQuery UI 選擇（Selectable） - 顯示為網格</title>
 <link rel="stylesheet" >
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <link rel="stylesheet" >
 <style>
 #feedback { font-size: 1.4em; }
 #selectable .ui-selecting { background: #FECA40; }
 #selectable .ui-selected { background: #F39814; color: white; }
 #selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
 #selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
 </style>
 <script>
 $(function() {
 $( "#selectable" ).selectable();
 });
 </script></head><body>
<ol id="selectable">
 <li class="ui-state-default">1</li>
 <li class="ui-state-default">2</li>
 <li class="ui-state-default">3</li>
 <li class="ui-state-default">4</li>
 <li class="ui-state-default">5</li>
 <li class="ui-state-default">6</li>
 <li class="ui-state-default">7</li>
 <li class="ui-state-default">8</li>
 <li class="ui-state-default">9</li>
 <li class="ui-state-default">10</li>
 <li class="ui-state-default">11</li>
 <li class="ui-state-default">12</li></ol>
</body></html>

序列化

寫一個函數，在 stop 事件發生時觸發，來收集被選中條目的索引值。呈現這些值作為反饋，或者以數據字符串形式進行傳遞。

在線咨詢

上一篇：使用 MDwiki 將 Markdown 發布成 H
下一篇：CSS margin-right 屬性

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

jquery復選框選中及下拉框選中指定項(刪除項)

您的項目需求