检查所有在jQuery版本2.1.3中不起作用

时间:2017-04-23 09:03:04

标签: jquery

为什么sudo apt-get install libqt5websockets5-dev 在我使用jQuery 2.1.3版时无效,请检查jsfiddle here

这段代码在1.7.4下工作正常。可能在2.1.3版本中不支持切换,我尝试使用Check all但未获得预期结果。

on.click

请指导。

2 个答案:

答案 0 :(得分:1)

我猜你已经有了解决方案。只需做一些小改动即可。



$(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");
  });    
	$("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>
&#13;
&#13;
&#13;

答案 1 :(得分: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