javascript - 我们如何获得复选框之前的状态？

Question

我的应用程序中有一个复选框，如下所示

 <input type="checkbox" ng-model="vm.somevalue" indeterminate " />

inminated 是一个指令，当 vm.somevalue 的值未定义时，该指令将更改复选框的状态。 现在，当我从中间状态单击复选框时，我需要取消选择复选框(vm.somevalue=false)。

任何帮助表示赞赏!

Answer 1

您可以添加一个click 事件并在数据属性中存储状态值。

$(function() {
  $('input[type=checkbox]')
    .setCheckbox('unchecked') // set initial state
    .on('click', function(e) {
       var $checkbox = $(this);
       switch($checkbox.data('state')) {
         case 0: // unchecked
           $checkbox.setCheckbox('indeterminate');
           console.log('Previous state: unchecked | New state: indeterminate');
           break;
         case 1: // indeterminate
           $checkbox.setCheckbox('checked');
           console.log('Previous state: indeterminate | New state: checked');
           break;
         case 2: // checked
           $checkbox.setCheckbox('unchecked');
           console.log('Previous state: checked | New state: unchecked');
           break;
       }
    });
});

$.fn.setCheckbox = function(state) {
  return $(this).each(function() {
    var $checkbox = $(this);
    if (state=='unchecked') {
      $checkbox
        .data('state',0)
        .prop('indeterminate',false)
        .prop('checked',false);
    }
    else if (state=='indeterminate') {
      $checkbox
        .data('state',1)
        .prop('indeterminate',true)
        .removeProp('checked');
    }
    else if (state=='checked') {
      $checkbox
        .data('state',2)
        .prop('indeterminate',false)
        .prop('checked',true);
    }
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="checkbox">
<input type="checkbox">

在我的示例中，我从未选中切换到不确定再到选中。我知道您只要求不确定到未选中，但我想给出一个对其他人也有用的完整答案。