Jquery 實(shí)現(xiàn)checkbox全選方法
昨天早上有寫到怎么利用Jquery實(shí)現(xiàn)全選
根據(jù)大家的意見對程序中一些寫法不好的地方進(jìn)行了修改,也是本人水平有限,存在各種考慮不到的地方。
文章最后我提出了一個(gè)問題,要寫一個(gè)通用的方法來調(diào)用,于是就有了現(xiàn)在的這篇文章,晚上回到家,我就寫出了效果
下面的例子可以供大家討論學(xué)習(xí),如果覺得不錯(cuò)也可以直接應(yīng)用到項(xiàng)目中。
1:為什么要寫這個(gè)方法
網(wǎng)上實(shí)現(xiàn)一句話全選全不選的有很多,但是好像都忽略了一個(gè)問題,全選的checkbox可以控制下面的子checkbox,但是下面的子checkbox應(yīng)該也可以控制上面的全選,這樣就有了我的這個(gè)方法。
2:開發(fā)過程:要實(shí)現(xiàn)通用就要解決2個(gè)問題,怎么分組,怎么判斷組里面哪個(gè)checkbox為全選,我想了想,覺得用name分組可以,
用class來判斷是否是需要全選的checkbox組。先找到所有class為需要全選的,再找出name屬性,根據(jù)name屬性就可以找到其他的子checkbox,只要找到元素就可以進(jìn)行操作了
3:文件,下面是我實(shí)現(xiàn)的js,保存為xs_checkbox_all.js
$(document).ready(function () {
var xsChk = "xsChk";//定義的樣式
var xsChkAll = "input[type='checkbox'][class='" + xsChk + "'][name]";//所有定義此樣式的checkbox
$(xsChkAll).each(function () {
var name = $(this).attr("name");
name = "input[type='checkbox'][class!='" + xsChk + "'][name='" + name + "']";//此全選框下面的子checkbox
$(this).click(function () {
$(name).attr("checked", $(this)[0].checked);
})
var xschk = $(this);
$(name).click(function () {
var IAll = $(name).length; //此子項(xiàng)目下所有checkbox的個(gè)數(shù)
var IChk = $(name + ":checked").length; //此子項(xiàng)目下所有勾選checkbox的個(gè)數(shù)
var isAllChecked = true; //是否是全選
if (IAll != IChk) {
isAllChecked = false;
}
$(xschk).attr("checked", isAllChecked);
});
});
});
頁面使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>
<title></title>
</head>
<body>
<script src=" </script>
<script src="xs_checkbox_all.js" type="text/javascript"></script>
<fieldset>
<legend>全選one</legend>
<input type="checkbox" class="xsChk" name="chk" />
全選
<div>
<input type="checkbox" name="chk" />
1<br />
<input type="checkbox" name="chk" />
2<br />
<input type="checkbox" name="chk" />
3<br />
<input type="checkbox" name="chk" />
4<br />
</div>
</fieldset>
<fieldset>
<legend>全選two</legend>
<input type="checkbox" class="xsChk" name="chk1" />
全選2
<div>
<input type="checkbox" name="chk1" />
11<br />
<input type="checkbox" name="chk1" />
22<br />
<input type="checkbox" name="chk1" />
33<br />
<input type="checkbox" name="chk1" />
44<br />
</div>
</fieldset>
</body>
</html>
可以達(dá)到效果,如果有什么優(yōu)化的地方,請大家提出,我會做的更好,謝謝大家了,以上就是本文的全部內(nèi)容了,希望大家能夠喜歡。
- jQuery實(shí)現(xiàn)CheckBox全選、全不選功能
- jQuery Checkbox 全選 反選的簡單實(shí)例
- jQuery實(shí)現(xiàn)checkbox列表的全選、反選功能
- 基于jQuery的checkbox全選問題分析
- jQuery對checkbox 復(fù)選框的全選全不選反選的操作
- jQuery實(shí)現(xiàn)checkbox全選的方法
- JQuery選中checkbox方法代碼實(shí)例(全選、反選、全不選)
- jquery中checkbox全選失效的解決方法
- jquery操作checkbox實(shí)現(xiàn)全選和取消全選
- jquery、js操作checkbox全選反選
- jq checkbox 的全選并ajax傳參的實(shí)例
相關(guān)文章
jQuery/JS監(jiān)聽input輸入框值變化實(shí)例
在本篇文章里小編給大家整理的是一篇關(guān)于jQuery/JS監(jiān)聽input輸入框值變化實(shí)例內(nèi)容,需要的朋友們學(xué)習(xí)下。2019-10-10使用jQuery的ajax方法向服務(wù)器發(fā)出get和post請求的方法
這篇文章主要介紹了使用jQuery的ajax方法向服務(wù)器發(fā)出get和post請求的方法,需要的朋友可以參考下2017-01-01jquery 利用show和hidden實(shí)現(xiàn)級聯(lián)菜單示例代碼
級聯(lián)菜單的實(shí)現(xiàn)方法有很多,在本文為大家介紹下使用show和hidden輕松實(shí)現(xiàn)下級聯(lián)效果,感興趣的朋友可以參考下,希望對大家有所幫助2013-08-0825個(gè)非常棒的jQuery滑塊插件和教程小結(jié)
圖像滑塊和幻燈片效果,已成為網(wǎng)頁設(shè)計(jì)的基本要素。它們以有趣的方式展示視覺內(nèi)容。如果你一直想知道這是如何實(shí)現(xiàn)的,那么這里的25個(gè)非常棒的 jQuery 圖片滑塊制作教程將幫助您實(shí)現(xiàn)這種效果2011-09-09jQuery插件實(shí)現(xiàn)適用于移動(dòng)端的地址選擇器
本文給大家分享的是一個(gè)jQuery插件,實(shí)現(xiàn)的是適用于移動(dòng)端的地址選擇器,有需要的小伙伴可以拿走參考下。2016-02-02jQuery.validate.js表單驗(yàn)證插件的使用代碼詳解
Validate是基于jQuery的一款輕量級驗(yàn)證插件,內(nèi)置豐富的驗(yàn)證規(guī)則,這篇文章主要介紹了jQuery.validate.js表單驗(yàn)證插件的使用代碼詳解,需要的朋友可以參考下2018-10-10