檢查所有不jQuery的版本2.1.3

Question

工作，爲什麼不Check all工作時，我使用jQuery 2.1.3版本，檢查jsfiddle here

此代碼是工作的罰款與1.7.4。可能是切換不支持在2.1.3版本，我試圖與on.click但沒有得到預期的結果。

$(document).ready(function(){ 
    $('.check:button').toggle(function(){ 
     $('input:checkbox').attr('checked','checked'); 
    var count = $("input[type=checkbox]:checked").size(); 
     $(this).val('uncheck all') 
     $("#count").text(count+ " item(s) selected"); 
    },function(){ 
     $('input:checkbox').removeAttr('checked'); 
     var count = $("input[type=checkbox]:checked").size(); 
     $(this).val('check all'); 
     $("#count").text(count+ " item(s) selected"); 
    }), 
    $("input[type=checkbox]").click(function() { 
    $("#count").html($("input[type=checkbox]:checked").length + " item(s) selected") 
    }) 
}) 

請指導。

Answer 1

From JQuery guide上 「.toggle（）」

顯示或隱藏匹配元素。

這裏有新的插件的解決方案：

$.fn.newtoggle = function(on,off){ 
    return this.each(function() { 
     var toggleClick = false; 
     $(this).click(function() { 
      if (toggleClick) { 
       toggleClick = false; 
       return off.apply(this, arguments); 
      } 
      toggleClick = true; 
      return on.apply(this, arguments); 
     }); 
    }); 
}; 

$(document).ready(function(){ 
    $('.check:button').newtoggle(function(){ 
     $('input:checkbox').prop('checked','checked'); 
    var count = $("input[type=checkbox]:checked").size(); 
     $(this).val('uncheck all') 
     $("#count").text(count+ " item(s) selected"); 
    },function(){ 
     $('input:checkbox').prop('checked', ''); 
     var count = $("input[type=checkbox]:checked").size(); 
     $(this).val('check all'); 
     $("#count").text(count+ " item(s) selected"); 
    }), 
    $("input[type=checkbox]").click(function() { 
     $("#count").html($("input[type=checkbox]:checked").length + " item(s) selected") 
    }) 
}) 

JSFiddle

Answer 2

我想你已經有了解決方案。只要做一些小的改變就可以做到。

$(document).ready(function(){ 
 
    $('.check').click(function() { 
 
     $(this).toggleClass("checkedClass"); 
 
     var checkboxes = $(this).closest('form').find(':checkbox'); 
 
     if($(this).hasClass('checkedClass')) { 
 
      checkboxes.prop('checked', true); 
 
     } else { 
 
      checkboxes.prop('checked', false); 
 
     } 
 
     var count = $("input[type=checkbox]:checked").size(); 
 
     $("#count").text(count+ " item(s) selected"); 
 
    });  
 
\t $("input[type=checkbox]").click(function() { 
 
     $("#count").html($("input[type=checkbox]:checked").length + " item(s) selected") 
 
    }); 
 
});

.check { 
 
    border: 1px solid red; 
 
    padding: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
<input type="button" class="check" value="check all" /> 
 
<input type="checkbox" class="cb-element" id="in1" /><label for="in1"> Checkbox 1</label> 
 
<input type="checkbox" class="cb-element" id="in2" /><label for="in2"> Checkbox 2</label> 
 
<input type="checkbox" class="cb-element" id="in3" /><label for="in3"> Checkbox 3</label> 
 
</form> 
 
<p id="count"></p>