将取消选中所有复选框的按钮?

时间:2014-04-07 19:04:04

标签: jquery cookies checkbox

我有一个存储在cookie中的复选框。

这是jquery代码:

//JQuery that will set the checkbox in it's current state
 $("#checkAll").on("change", function() {
    $(':checkbox').not(this).prop('checked', this.checked);
  });

  $(":checkbox").on("change", function(){
    var checkboxValues = {};
    $(":checkbox").each(function(){
      checkboxValues[this.id] = this.checked;
    });
    $.cookie('checkboxValues', checkboxValues, { expires: 7, path: '/' })
  });

  function repopulateCheckboxes(){
    var checkboxValues = $.cookie('checkboxValues');
    if(checkboxValues){
      Object.keys(checkboxValues).forEach(function(element) {
        var checked = checkboxValues[element];
        $("#" + element).prop('checked', checked);
      });
    }
  }

  $.cookie.json = true;
  repopulateCheckboxes();

上面的代码完美无缺,但当我尝试使用按钮取消选中它时,它根本没有取消选中。

这是我使用的功能:

 $("#UncheckAll").click(function(){
   $("input[type='checkbox']").prop('checked',false);
});

我该怎么办?可以有人帮助我。

2 个答案:

答案 0 :(得分:1)

为所有复选框提供一个类,例如myclass。然后使用jQuery。

document.ready功能

中删除您的Cookie
 $.cookie("checkboxValues", null);//checkboxValues is the name of your cookie

对于jQuery 1.6 +

$("#UncheckAll").click(function(){
   $('input:checkbox:checked.myclass').prop('checked',false);
});

用于jquery 1.5 -

$("#UncheckAll").click(function(){
   $('input:checkbox:checked.myclass').attr('checked',false);
});

答案 1 :(得分:0)

试试这个

 $("#UncheckAll").click(function(){
   $('input:checkbox.class').prop('checked',false);
});

或者如果没有共同的类

 $("#UncheckAll").click(function(){
   $(':checkbox').prop('checked',false);
});