jQuery實(shí)現(xiàn)CheckBox全選、全不選功能
廢話不多說(shuō)了，直接給大家貼代碼了，具體代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery實(shí)現(xiàn)CheckBox全選、全不選</title>
<script src="http://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(':checkbox').click(function(evt){
// 阻止冒泡
evt.stopPropagation();
});
//判斷是否全選
$("#checkAll").click(function() {
$('input[name="subBox"]').prop("checked",this.checked);
});
var $subBox = $("input[name='subBox']");
$subBox.click(function(){
//alert($subBox.length);
//alert($("input['subBox']:checked").length);
$("#checkAll").prop("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);
});
//用于檢查是否選中,選中的話提示值
$("#butt").click(function (){
//$('input[name="subBox"]').prop("checked",this.checked);
var arrChk=$("input[name='subBox']:checked");
$(arrChk).each(function(){ //each() 遍歷函數(shù)
alert(this.value);
});
if(arrChk.length==0){
alert("沒(méi)有選中")
}
});
});
</script>
</head>
<body>
<div>
<input id="checkAll" type="checkbox" />全選
<input name="subBox" type="checkbox" value="1" />選項(xiàng)1
<input name="subBox" type="checkbox" value="2"/>選項(xiàng)2
<input name="subBox" type="checkbox" value="3"/>選項(xiàng)3
<input name="subBox" type="checkbox" value="4"/>選項(xiàng)4
<input type="button" id="butt" value="檢查是否選中"/>
</div>
</body>
</html>
jQuery版本問(wèn)題
原本操作屬性用的是 $("XXX").attr("attrName");
而jQuery的版本用的是2.1.1，這就是存在一個(gè)兼容性和穩(wěn)定性問(wèn)題。
jQuery API明確說(shuō)明，1.6+的jQuery要用prop，尤其是checkBox的checked的屬性的判斷，
即 使用代碼如下:
$("input[name='checkbox']").prop("checked");
$("input[name='checkbox']").prop("disabled", false);
$("input[name='checkbox']").prop("checked", true);
于是乎將attr改為prop，問(wèn)題得解。
相關(guān)閱讀：
jQuery操作復(fù)選框(CheckBox)的取值賦值實(shí)現(xiàn)代碼
jQuery對(duì)checkbox 復(fù)選框的全選全不選反選的操作
Jquery EasyUI實(shí)現(xiàn)treegrid上顯示checkbox并取選定值的方法
以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)CheckBox全選、全不選功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- 多個(gè)jquery.datatable共存,checkbox全選異常的快速解決方法
- jQuery CheckBox全選、全不選實(shí)現(xiàn)代碼小結(jié)
- jquery復(fù)選框CHECKBOX全選、反選
- JQUERY CHECKBOX全選,取消全選,反選方法三
- jquery中checkbox全選失效的解決方法
- jquery 實(shí)現(xiàn)checkbox全選，反選，全不選等功能代碼(奇數(shù))
- jquery數(shù)組之存放checkbox全選值示例代碼
- Jquery CheckBox全選方法代碼附j(luò)s checkbox全選反選代碼
- jquery checkbox全選反選效果代碼
- jQuery checkbox全選/取消全選實(shí)現(xiàn)代碼
- jQuery實(shí)現(xiàn)table表格checkbox全選的方法分析
相關(guān)文章
jquery validate和jquery form 插件組合實(shí)現(xiàn)驗(yàn)證表單后AJAX提交
在ajax流行的時(shí)代，好像很少能看見(jiàn)傳統(tǒng)的同步提交表單方式了，是啊我們當(dāng)然要用更加給力的AJAX來(lái)實(shí)現(xiàn)異步無(wú)刷新提交表單，好了開始今天的jQuery之旅吧，今天我們來(lái)利用jquery.validate和jquery.form 插件組合實(shí)現(xiàn)驗(yàn)證表單后AJAX提交 ，需要的朋友可以參考下2015-08-08
jQuery EasyUI 右鍵菜單--關(guān)閉標(biāo)簽/選項(xiàng)卡的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jQuery EasyUI 右鍵菜單--關(guān)閉標(biāo)簽/選項(xiàng)卡的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
jQuery實(shí)現(xiàn)動(dòng)態(tài)給table賦值的方法示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)給table賦值的方法,結(jié)合具體實(shí)例形式分析了jQuery動(dòng)態(tài)操作table表格節(jié)點(diǎn)的相關(guān)技巧,需要的朋友可以參考下2017-07-07
jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換(多種效果)小結(jié)
這篇文章主要介紹了jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換效果小結(jié),實(shí)例總結(jié)了幾種常見(jiàn)的tab切換效果,包括鼠標(biāo)點(diǎn)擊切換、滑過(guò)切換、定時(shí)自動(dòng)切換等,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09
Jquery倒數(shù)計(jì)時(shí)按鈕setTimeout的實(shí)例代碼
這篇文章介紹了Jquery倒數(shù)計(jì)時(shí)按鈕setTimeout的實(shí)例，有需要的朋友可以參考一下2013-07-07
JQuery表單驗(yàn)證插件EasyValidator用法分析
這篇文章主要介紹了JQuery表單驗(yàn)證插件EasyValidator用法,以實(shí)例形式系統(tǒng)分析了EasyValidator的功能特性及具體用法,是非常實(shí)用的jQuery插件,需要的朋友可以參考下2014-11-11
Jquery easyui 實(shí)現(xiàn)動(dòng)態(tài)樹
本文給大家介紹jquery easyui實(shí)現(xiàn)動(dòng)態(tài)樹，本文通過(guò)代碼實(shí)例相結(jié)合的方式給大家展示jquery easyui實(shí)現(xiàn)動(dòng)態(tài)樹的過(guò)程，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
用jquery實(shí)現(xiàn)學(xué)校的校歷(asp.net+jquery ui 1.72)
學(xué)校日歷有以下幾個(gè)特點(diǎn)：1顯示本周是本學(xué)期的第幾周；2顯示今日事件；3特殊顯示有事件的日期，點(diǎn)擊該日期顯示本日事件。2010-01-01
jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)提示信息的地圖熱點(diǎn)效果
這是一個(gè)升級(jí)版本，更新了一個(gè)在IE8里的小問(wèn)題，加入了提示框的內(nèi)容自動(dòng)換行處理(北京點(diǎn)上有演示)！估計(jì)差不多該是最后樣式了。IE6、IE8、谷歌、火狐、測(cè)試正常。2015-04-04
jQuery實(shí)現(xiàn)限制textarea文本框輸入字符數(shù)量的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)限制textarea文本框輸入字符數(shù)量的方法,涉及jQuery鍵盤事件及頁(yè)面元素的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05