js, jQuery實(shí)現(xiàn)全選、反選功能
更新時(shí)間：2017年03月08日 09:20:31 作者：虔誠(chéng)_k
本文主要介紹了js, jQuery實(shí)現(xiàn)全選、反選功能的方法，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
js ，jq實(shí)現(xiàn)全選、反選功能：
js:思路：1.點(diǎn)擊全選按鈕實(shí)現(xiàn)，下面內(nèi)容全選，與反選 2.下面有一個(gè)沒(méi)有選中時(shí)，全選按鈕不勾選，當(dāng)全部選中時(shí)才全選。這里引入一個(gè)計(jì)數(shù)器，來(lái)判斷是否全部選中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
全選<input type="checkbox" name="allchoose" id="box" onclick="chk()"/>
<div id="lower">
蘋(píng)果<input type="checkbox" name="apple" id="apple"/>
香蕉<input type="checkbox" name= "banner" id="banner" />
橘子<input type="checkbox" name="origin" id="origin"/>
</div>
<script type="text/javascript">
var box = document.getElementById("box");
var lb = document.getElementById("lower");
var lber = lb.getElementsByTagName("input");
//全選，反選
box.onclick = function(){
if(this.checked){
for(var i=0;i<lber.length;i++){
lber[i].checked = true;
}
}else{
for(var i=0;i<lber.length;i++){
lber[i].checked = false;
}
}
}
//下面全選后，全選框才勾上
for(var i=0;i<lber.length;i++){
lber[i].onclick = function(){
//引入計(jì)數(shù)器sum
var sum = 0;
for(var j=0;j<lber.length;j++){
if(lber[j].checked){
sum += 1;
if(sum == lber.length){
box.checked = true;
} else {
box.checked = false;
}
}
}
}
}
</script>
</body>
</html>
jq,使用jQuery 前先引入 jq:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="checkbox" value="全選" id="ckAll"/>水果</br>
<div class="box">
<input type="checkbox" value="蘋(píng)果" id="apple"/>蘋(píng)果
<input type="checkbox" value="香蕉" id="bann"/>香蕉
<input type="checkbox" value="橘子" id="origin"/>橘子
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//給所有 .box input 元素添加 checked = ckAll 當(dāng)前的狀態(tài)；
//prop('checked',value) ,第一個(gè)值獲取屬性，第二個(gè)值：設(shè)置屬性值。prop只有一個(gè)參數(shù)時(shí)，表示獲取元素屬性。
$('#ckAll').click(function(){
$('.box input').prop('checked',$(this).prop('checked'));
});
$('.box input').click(function(){
//each 便利每一個(gè)元素，讓其執(zhí)行該函數(shù)
$('.box input').each(function(){
if(!$(this).prop('checked')){
$('#ckAll').prop('checked',false);
//有一個(gè)不滿(mǎn)足就 跳出該循環(huán)，避免執(zhí)行下面
return false;
}else{
$('#ckAll').prop('checked',true);
}
})
})</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
利用js判斷瀏覽器類(lèi)型(是否為IE,Firefox,Opera瀏覽器)
我們開(kāi)發(fā)的人來(lái)說(shuō)經(jīng)常要加個(gè)判斷，要不可能某些功能沒(méi)法正常使用。要是沒(méi)加個(gè)判斷就會(huì)給大家?guī)?lái)些麻煩2013-11-11
這篇文章主要介紹了關(guān)于微信小程序bug記錄與解決方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
200行HTML+JavaScript實(shí)現(xiàn)年會(huì)抽獎(jiǎng)程序
這篇文章主要為大家詳細(xì)介紹了HTML+JavaScript實(shí)現(xiàn)年會(huì)抽獎(jiǎng)程序的200行代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
JavaScript+HTML5 canvas實(shí)現(xiàn)放大鏡效果完整示例
這篇文章主要介紹了JavaScript+HTML5 canvas實(shí)現(xiàn)放大鏡效果,結(jié)合完整實(shí)例形式分析了javascript+HTML5 canvas針對(duì)圖片元素的獲取、響應(yīng)鼠標(biāo)事件變換元素屬性相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
JavaScript實(shí)現(xiàn)文字黑洞特效的代碼詳解
這篇文章介紹了用 JavaScript 和 HTML5 Canvas 實(shí)現(xiàn)文字黑洞特效的項(xiàng)目,包括項(xiàng)目特征,如黑洞特效、引力效果、文字動(dòng)畫(huà)和交互設(shè)計(jì),以及技術(shù)亮點(diǎn),還闡述了實(shí)現(xiàn)邏輯,涵蓋項(xiàng)目結(jié)構(gòu)、文字和黑洞對(duì)象的實(shí)現(xiàn)、動(dòng)畫(huà)循環(huán)等,并給出了詳細(xì)的代碼示例和解釋2025-03-03
JavaScript數(shù)據(jù)類(lèi)型轉(zhuǎn)換實(shí)例(其他類(lèi)型轉(zhuǎn)字符串、數(shù)值型、布爾類(lèi)型)
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)據(jù)類(lèi)型轉(zhuǎn)換的相關(guān)資料,本文分別介紹了其他類(lèi)型轉(zhuǎn)為字符串、其他類(lèi)型轉(zhuǎn)為數(shù)值型以及其他類(lèi)型轉(zhuǎn)為布爾類(lèi)型的方法,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了r.js來(lái)合并壓縮css文件的示例代碼，在r5下新建一個(gè)css文件夾，里面有四個(gè)css文件：main.css、nav.css、form.css、grid.css，具體示例代碼大家參考下本文2018-04-04
JavaScript Date對(duì)象詳解及時(shí)間戳和時(shí)間的相互轉(zhuǎn)換問(wèn)題
這篇文章主要介紹了JavaScript Date對(duì)象詳解及時(shí)間戳和時(shí)間的相互轉(zhuǎn)換問(wèn)題,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
這篇文章主要為大家分享了js簡(jiǎn)易版的購(gòu)物車(chē)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JS實(shí)現(xiàn)中英文混合文字溢出友好截取功能
這篇文章主要介紹了JS實(shí)現(xiàn)中英文混合文字溢出友好截取功能,通常會(huì)用到j(luò)s的 substr 或者 substring方法, 以及 字符串的length屬性。需要的朋友可以參考下2018-08-08