整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
multiple-select。這個組件風格簡單、文檔全、功能強大。multiple-select。這個組件風格簡單、文檔全、功能強大。但是覺得它選中的效果不太好。關于它的效果展示，我們放在后面。還是給出對應的文檔API。 我們項目中因為需要多選的下拉列表select，因此找到了這個控件，但是有些需求需要能夠設置多選的select一個初始值，開始找不到怎么實現，后來找了資料才發現其實很簡單。
首先引入需要的js文件和樣式css文件。
<!-- 多選select-->
然后在頁面html代碼中定義一個多選的select控件
最重要的是需要在domcument載入的時候，初始化multiple-select的參數。
這樣就可以允許為多選了，初始化select列表控件了。
在項目中，有一個需求是在頁面載入的時候，就要把select全部選中，也就是全選功能。但是找了一圈也沒找到直接可以多選的方法，巴拉了半天的網站，也沒有找到對應的方法。 最后只能在網站幫助文檔中找到方法checkAll和uncheckAll方法描述，但是具體怎么使用沒有demo了。
后來試了一圈，終于找到方法了。很簡單，如下一句話代碼解決。
初始化的時候，增加一行代碼，如下：
$("#accountList").multipleSelect('checkAll');同于服務器端腳本語言，例如php與ASP，Javascript是客戶端腳本語言，也就是說JavaScript是在用戶的瀏覽器上運行，不需要服務器的支持而可以獨立運行。所以在早期程序員比較青睞于JavaScript以減少對服務器的負擔，而與此同時也帶來另一個問題：安全性。而隨著服務器的強壯，雖然程序員更喜歡運行于服務端的腳本以保證安全，但JavaScript仍然以其跨平臺、容易上手等優勢大行其道。
Web前端教程
需求分析
商品分類界面中，當我們點擊全選框的時候，我們希望選中所有的商品，當我們取消掉的時候，我們希望不選中所有的商品
技術分析
checked="checked"選擇復選框
事件:onclick點擊事件
getElementsByTagName：返回包含帶有指定標簽名稱的所有元素的節點列表(集合/節點數組)。
getElementsByName：返回包含帶有指定類名的所有元素的節點列表。
步驟分析
全選和全部選步驟分析:
1.確定事件:onclick單機事件
2.事件觸發函數:checkAll()
3.函數要去做一些事情:
獲得當前第一個checkbox的狀態
獲得所有分類項的checkbox
修改每一個checkbox的狀態
代碼實現
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<!--
1.確定事件:文檔加載完成onload
2.事件要觸發函數:init()
3.函數:操作頁面的元素
要操作表格中每一行
動態的修改行的背景顏色
-->
<script>
functioninit(){
//得到表格
vartab=document.getElementById("tab");
//得到表格中每一行
varrows=tab.rows;
//便利所有的行,然后根據奇數偶數
for(vari=1;i<rows.length;i++){
varrow=rows[i];//得到其中的某一行
if(i%2==0){
row.bgColor="yellow";
}else{
row.bgColor="red"
}
}
}
/*
全選和全部選步驟分析:
1.確定事件:onclick單機事件
2.事件觸發函數:checkAll()
3.函數要去做一些事情:
獲得當前第一個checkbox的狀態
獲得所有分類項的checkbox
修改每一個checkbox的狀態
*/
functioncheckAll(){
// 獲得當前第一個checkbox的狀態
varcheck1=document.getElementById("check1");
//得到當前checked狀態
varchecked=check1.checked;
// 獲得所有分類項的checkbox
// varchecks=document.getElementsByTagName("input");
varchecks=document.getElementsByName("checkone");
// alert(checks.length);
for(vari=0;i<checks.length;i++){
// 修改每一個checkbox的狀態
varcheckone=checks[i];
checkone.checked=checked;
}
}
</script>
</head>
<bodyonload="init()">
<tableborder="1px"width="600px"id="tab">
<tr>
<td>
<inputtype="checkbox"onclick="checkAll()"id="check1"/>
</td>
<td>分類ID</td>
<td>分類名稱</td>
<td>分類商品</td>
<td>分類描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<inputtype="checkbox"name="checkone"/>
</td>
<td>1</td>
<td>手機數碼</td>
<td>華為,小米,尼康</td>
<td>黑馬數碼產品質量最好</td>
<td>
<ahref="#">修改</a>|<ahref="#">刪除</a>
</td>
</tr>
<tr>
<td>
<inputtype="checkbox"name="checkone"/>
</td>
<td>2</td>
<td>成人用品</td>
<td>充氣的</td>
<td>這里面的充氣電動硅膠的</td>
<td><ahref="#">修改</a>|<ahref="#">刪除</a></td>
</tr>
<tr>
<td>
<inputtype="checkbox"name="checkone"/>
</td>
<td>3</td>
<td>電腦辦公</td>
<td>聯想,小米</td>
<td>筆記本特賣</td>
<td><ahref="#">修改</a>|<ahref="#">刪除</a></td>
</tr>
<tr>
<td>
<inputtype="checkbox"name="checkone"/>
</td>
<td>4</td>
<td>饞嘴零食</td>
<td>辣椒,麻花,黃瓜</td>
<td>年貨</td>
<td><ahref="#">修改</a>|<ahref="#">刪除</a></td>
</tr>
<tr>
<td>
<inputtype="checkbox"name="checkone"/>
</td>
<td>5</td>
<td>床上用品</td>
<td>床單,被套,四件套</td>
<td>都是套子</td>
<td><ahref="#">修改</a>|<ahref="#">刪除</a></td>
</tr>
</table>
</body>
</html>
JavaScript是一種腳本語言，其源代碼在發往客戶端運行之前不需經過編譯，而是將文本格式的字符代碼發送給瀏覽器由瀏覽器解釋運行。解釋語言的弱點是安全性較差，而且在JavaScript中，如果一條運行不了，那么下面的語言也無法運行。而且由于每次重新加載都會重新解譯，加載后，有些代碼會延遲至運行時才解譯，甚至會多次解譯，所以速度較慢。
以上是酷仔今日整理的“前端教程：使用JavaScript完成復選框的全選和全不選”一文，希望為正在學習Web前端的同學提供參考。
多選框全選與全不選是前端開發人員必學的案例了，這里完成了以下需求：
網頁代碼部分如下：
<form id="test-form" action="test">
<legend>請選擇想要學習的編程語言：</legend>
<fieldset>
<p>
<label class="selectAll">
<input type="checkbox">
<span class="selectAll">全選</span>
<span class="deselectAll">全不選</span>
</label>
<a href="#0" class="invertSelect">反選</a></p>
<p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
<p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
<p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
<p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
<p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
<p>
<button type="submit">Submit</button>
</p>
</fieldset>
</form>先獲取dom元素
var
form = $('#test-form'),
langs = form.find('[name=lang]'),
selectAll = form.find('label.selectAll :checkbox'),
selectAllLabel = form.find('label.selectAll span.selectAll'),
deselectAllLabel = form.find('label.selectAll span.deselectAll'),
invertSelect = form.find('a.invertSelect');全選與全不選實現起來很簡單,利用jquery對象的prop方法來設置選中狀態，需要注意的是這里不能使用attr()方法：
// 全選與全不選
selectAll.on("change",()=>{
if(selectAll.prop("checked")) {
//全選
langs.prop("checked",true)
selectAllLabel.hide()
deselectAllLabel.show()
}else{
// 全不選
langs.prop("checked",false)
selectAllLabel.show()
deselectAllLabel.hide()
}
})反選的方法也很簡單：
invertSelect.on("click",()=>{
//jquery對象要先使用Array.from方法轉換成數組，利用數組來遍歷
//需要注意的是，遍歷的每一個元素是dom對象，而不是jquery對象了,
//不能再使用prop方法了
Array.from(langs).forEach(item=>item.checked=!item.checked)
})當用戶把所有語言都手動勾上時，“全選”被自動勾上，并變為“全不選”。實現這個需求，需要讓change事件綁定所有的name為lang的checkbox對象（langs）,事件觸發時，要遍歷所有的langs,如果全部為選中狀態，則“全選”自動勾上，并變為“全不選”。這里獲取所有的選中狀態的checkbox,可以使用 $('[name=lang]:checked'),代碼如下：
var langsChecked = $('[name=lang]:checked')
//如果選中的checkbox數量大于等于5，即是全部選中
if(langsChecked.length>=5){
//全選打勾
selectAll.prop("checked",true)
//全選標簽隱藏
selectAllLabel.hide()
//全不選標簽顯示
deselectAllLabel.show()
}else{
//全選去掉勾
selectAll.prop("checked",false)
//全選標簽顯示
selectAllLabel.show()
//全不選標簽隱藏
deselectAllLabel.hide()
}為避免與之前的代碼顯示沖突，這里封裝為一個方法，前面的代碼也需要使用該方法,完整代碼如下：
$(function(){
var
form = $('#test-form'),
langs = form.find('[name=lang]'),
selectAll = form.find('label.selectAll :checkbox'),
selectAllLabel = form.find('label.selectAll span.selectAll'),
deselectAllLabel = form.find('label.selectAll span.deselectAll'),
invertSelect = form.find('a.invertSelect');
// 全選與全不選
selectAll.on("change",()=>{
if(selectAll.prop("checked")) {
//全選
langs.prop("checked",true)
selectAllLabel.hide()
deselectAllLabel.show()
}else{
// 全不選
langs.prop("checked",false)
selectAllLabel.show()
deselectAllLabel.hide()
}
select()
})
//反選
invertSelect.on("click",()=>{
//jquery對象要先使用Array.from方法轉換成數組，利用數組來遍歷
//需要注意的是，遍歷的每一個元素是dom對象，而不是jquery對象了,
//不能再使用prop方法了
Array.from(langs).forEach(item=>item.checked=!item.checked)
select()
})
//當用戶把所有語言都手動勾上時，“全選”被自動勾上，并變為“全不選”；
//當用戶手動去掉選中至少一種語言時，“全不選”自動被去掉選中，并變為“全選”。
function select(){
var langsChecked = $('[name=lang]:checked')
console.log(langsChecked)
//如果選中的checkbox數量大于等于5，即是全部選中
if(langsChecked.length>=5){
selectAll.prop("checked",true)
selectAllLabel.hide()
deselectAllLabel.show()
}else{
selectAll.prop("checked",false)
selectAllLabel.show()
deselectAllLabel.hide()
}
}
langs.change(select)
})如有疑問，歡迎在評論區留言。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
