欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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>

總結(jié)：

對于HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。

對于HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。

參考 http://www.dbjr.com.cn/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)生成的，跟這個有關(guān)系么？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í)行一次的解決方案，希望對大家有所幫助。

相關(guān)文章

最新評論