1. 程式人生 > >Jquery 復選框全選與反選點擊執行一次然後失效解決方案

Jquery 復選框全選與反選點擊執行一次然後失效解決方案

jquery cli attr false jquer function class 作用 ear

在做項目時遇到一個bug,checkbox全選與反選功能,只能點擊一次,再點就不起作用了,為了解決此問題,我查找了好多資料,下面把具體解決方案整理分享給大家,需要的朋友可以參考下

代碼需求, 使用attr只能執行一次,使用prop則完美實現全選和反選,獲取所有選中的項並把選中項的文本組成一個字符串。

解決方案一:

代碼如下:

<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只能執行一次
   $("input[name=‘chk_list[]‘]").attr("checked", $(this).attr("checked")); 
   // 使用prop則完美實現全選和反選
   $("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://www.jb51.net/article/62308.htm

<script type="text/javascript">
jQuery(function($) {
// 給全選添加點擊事件
$("[name=‘allSel‘]").click(function(){
if($(this).is(‘:checked‘)){


$("[name=‘select‘]").prop(‘checked‘,true);
}else{
$("[name=‘select‘]").prop(‘checked‘,false);
}
});
//給復選框添加點擊事件
$("[name=‘select‘]").click(function(){
var allSel = false;

$("[name=‘select‘]").each(function(){
if(!$(this).is(‘:checked‘)){
allSel = true;
}
})
//如果有checkbox沒有被選中
if(allSel){
$("[name=‘allSel‘]").prop(‘checked‘,false);
}else{
$("[name=‘allSel‘]").prop(‘checked‘,true);
}
})

});
</script>

Jquery 復選框全選與反選點擊執行一次然後失效解決方案