Question

使用以下方法选择所有复选框时出现问题。

我正在使用这个例子：

$(document).ready(function(){
    $('.check:button').toggle(function(){
        $('input:checkbox').attr('checked','checked');
        $(this).val('uncheck all')
    },function(){
        $('input:checkbox').removeAttr('checked');
        $(this).val('check all');        
    })
})

HTML

  <input type="button" class="check" value="check all" />

   <input type="checkbox" class="cb-element" /> Checkbox  1
   <input type="checkbox" class="cb-element" /> Checkbox  2
   <input type="checkbox" class="cb-element" /> Checkbox  3

但是在jQuery 1.11中进入网页时按钮会淡出。

对此有什么解决方法？

Answer 1

使用toggle() was removed in jQuery 1.9 ...因此，如果您使用的是jQuery＆gt; = 1.9，则可能必须使用.click()

$(document).ready(function () {
    $('.check:button').click(function () {
        $('input[type="checkbox"]').prop('checked', this.value == 'check all');
        $(this).val(function () {
            return this.value == 'check all' ? 'uncheck all' : 'check all';
        })
    })
})

演示：Fiddle

Answer 2

仅供参考，jQuery 1.9中删除了切换事件。见api.jquery.com/toggle-event。相反，尝试：

var checked = false;
$('.check:button').click(function () {
    checked = !checked;
    $('input:checkbox').prop('checked', checked);
    $(this).val(checked ? 'uncheck all' : 'check all')
});

<强> jsFiddle example

Answer 3

试试这个：

 $('.check:button').click(function(){
   if($('input:checkbox:checked').length!=$('input:checkbox').length){
      $('input:checkbox').prop('checked',true);
      $(this).val('uncheck all');
   }else{
      $('input:checkbox').prop('checked',false);
      $(this).val('check all');                  
   }});

<强> Working Demo

Answer 4

使用.prop并将您的jquery代码修改为以下内容。虽然这会使用click事件

 $(document).ready(function () {
    $('.check:button').click(function () {
        if ($(this).val() == "check all") {
            $('input:checkbox').prop('checked', true);
            $(this).val('uncheck all');
        } else {
            $('input:checkbox').prop('checked', false);
            $(this).val('check all');
        }

    });
});

演示：http://jsfiddle.net/AmitJoki/JJ9XR/1/

使用jQuery选择复选框时出现问题

4 个答案: