Jquery全選與反選點擊執(zhí)行一次的解決方案
更新時間：2015年08月14日 11:00:14 投稿：mrr
在做項目時遇到一個bug，checkbox全選與反選功能，只能點擊一次，再點就不起作用了，為了解決此問題，我查找了好多資料，下面把具體解決方案整理分享給大家，需要的朋友可以參考下
代碼需求， 使用attr只能執(zhí)行一次，使用prop則完美實現(xiàn)全選和反選，獲取所有選中的項并把選中項的文本組成一個字符串。
解決方案一：
代碼如下：
<html>
<head>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
<input type="checkbox" name="chk_list[]" value="1" />1
<input type="checkbox" name="chk_list[]" value="2" />2
<input type="checkbox" name="chk_list[]" value="3" />3
<input type="checkbox" name="chk_list[]" value="4" />4
<input type="checkbox" name="chk_all" id="chk_all" />全選/取消全選
<script type="text/javascript">
$("#chk_all").click(function(){
// 使用attr只能執(zhí)行一次
$("input[name='chk_list[]']").attr("checked", $(this).attr("checked"));
// 使用prop則完美實現(xiàn)全選和反選
$("input[name='chk_list[]']").prop("checked", $(this).prop("checked"));
// 獲取所有選中的項并把選中項的文本組成一個字符串
var str = '';
$($("input[name='chk_list[]']:checked")).each(function(){
str += $(this).next().text() + ',';
});
alert(str);
});
</script>
</body>
</html>
總結：
對于HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
對于HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。
參考 http://m.fzitv.net/article/62308.htm
解決方案二：
問題描述：
$(".chooseall").click(function(){
if($(".chooseall").attr("checked") == "checked"){
$("input[name='checkbox1']").removeAttr("checked","checked");
console.log(1);
}else{
$("input[name='checkbox1']").attr("checked","checked");
console.log(2);
}
});
上面的這個代碼第一次點擊和第二次點擊，能實現(xiàn)全選和反選功能，但一遍之后就不再起作用，這是什么情況啊
除了第一個checkbox之外，其余的都是ajax動態(tài)生成的，跟這個有關系么？console.log每次點擊的都能交替輸出1和2，但就是中間的代碼不能執(zhí)行。
解決方案：
removeAttr參數(shù)只需要一個，removeAttr("checked")
不過建議替換成
$(".chooseall").click(function(){
if($(".chooseall").prop("checked") == true){
$("input[name='checkbox1']").prop("checked", false);
console.log(1);
}else{
$("input[name='checkbox1']").prop("checked", false);
console.log(2);
}
});
或者更簡潔的，
$(".chooseall").click(function(){
var isChecked = $(this).prop("checked");
$("input[name='checkbox1']").prop("checked", isChecked);
});
以上是Jquery全選與反選點擊執(zhí)行一次的解決方案，希望對大家有所幫助。
您可能感興趣的文章:
- jQuery實現(xiàn)按鈕只點擊一次后就取消點擊事件綁定的方法
- jQuery事件綁定on()、bind()與delegate() 方法詳解
- jQuery事件綁定與解除綁定實現(xiàn)方法
- 淺談jQuery事件綁定原理
- jQuery事件綁定和委托實例
- jquery 新建的元素事件綁定問題解決方案
- 解析jQuery的三種bind/One/Live事件綁定使用方法
- 關于jQuery新的事件綁定機制on()的使用技巧
- jquery實現(xiàn)簡單的全選和反選功能
- jquery實現(xiàn)全選、反選、獲得所有選中的checkbox
- jQuery實現(xiàn)按鈕的點擊 全選/反選 單選框/復選框 文本框 表單驗證
- jQuery 全選 全不選 事件綁定的實現(xiàn)代碼
相關文章
jQuery實現(xiàn)分章節(jié)錨點“回到頂部”動畫特效代碼
這篇文章主要介紹了jQuery實現(xiàn)分章節(jié)錨點“回到頂部”動畫特效代碼,涉及jQuery響應鼠標事件結合scroll實現(xiàn)頁面滾動的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
基于?jquery-cxselect?實現(xiàn)下拉聯(lián)動效果功能實現(xiàn)
這篇文章主要介紹了基于?jquery-cxselect?實現(xiàn)下拉聯(lián)動效果,下拉聯(lián)動是基于query的一款聯(lián)動下拉菜單插件 jquery-cxselect實現(xiàn)，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-02-02
本文主要介紹jQuery文件上傳控件 Uploadify的用法，原作者做了非常詳細的備注，有需要的朋友可以參考一下。2016-06-06
jQuery 判斷元素是否存在然后按需加載內容的實現(xiàn)代碼
這篇文章主要介紹了jQuery 判斷元素是否存在然后按需加載內容的實現(xiàn)代碼,需要的朋友可以參考下2020-01-01
與jquery serializeArray()一起使用的函數(shù)，主要來方便提交表單
與jquery serializeArray()一起使用的函數(shù)，主要來方便提交表單，需要的朋友可以參考下。2011-01-01
這篇文章主要介紹一個自寫的jQuery異步加載數(shù)據(jù)添加事件的方法,需要的朋友可以參考下2014-05-05
jQuery實現(xiàn)側邊導航欄及滑動電梯效果(仿淘寶)
這篇文章主要介紹了如何利用JQuery+CSS模擬淘寶實現(xiàn)側邊導航欄以及滑動電梯效果，文中的示例代碼講解詳細，感興趣的小伙伴可以動手試一試2022-03-03
jquery form input 選擇，獲取 id為 instanceInfo form 下的 隱藏的input,需要的朋友可以參考下2014-04-04
jquery實現(xiàn)頂部向右伸縮的導航區(qū)域代碼
這篇文章主要介紹了jquery實現(xiàn)頂部向右伸縮的導航區(qū)域代碼,涉及jquery鼠標click點擊事件及頁面元素動態(tài)操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
jQuery實現(xiàn)自動與手動切換的滾動新聞特效代碼分享
這篇文章主要介紹了jQuery實現(xiàn)列表自動循環(huán)滾動手動滾動展示新聞，推薦給大家，有需要的小伙伴可以參考下。2015-08-08