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