我们如何获得复选框的先前状态？

Posted 2023-05-09

【中文标题】我们如何获得复选框的先前状态？

【英文标题】：How can we get the previous state of the checkbox?

【发布时间】：2017-12-17 20:06:05

【问题描述】：

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

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

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

任何帮助表示赞赏！

【问题讨论】：

使用!得到当前的反义词

@guradio 实际上不起作用，因为 indeterminate 不是 checked 属性的状态。 indeterminate 是它自己的属性，与 checked 无关。因此，如果一个复选框是indeterminate，这并不意味着checked 是真或假。两者都可以。

【参考方案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">

在我的示例中，我从unchecked 切换到indeterminate 到checked。我知道您只要求indeterminate 到unchecked，但我想给出一个对其他人也有用的完整答案。

【参考方案2】：

你可以使用长度，如果为零则不检查。

var check=  $('input[type=checkbox]').length;

如果选中复选框，则使用 is() 和 :checked 将结果作为布尔值，即为真。

var check=  $('input[type=checkbox]').is(':checked');

【参考方案3】：

当click 事件触发时，复选框的状态已经改变。您可以通过侦听mouseup 事件来获取原始值。这是唯一一次我们可以知道复选框的当前选中状态并且我们可以确定单击事件将被触发（mousedown 事件也具有旧值，但仍可以取消交互）。然后在mouseup 处理程序中添加一个一次性的click 事件处理程序来设置状态：

var checkbox = document.getElementById('checkbox');

checkbox.addEventListener('mouseup', function (event) 
  if (event.which !== 1) return;
  
  if (checkbox.indeterminate) 
    checkbox.addEventListener('click', function () 
      checkbox.indeterminate = false;
      checkbox.checked = true;
    ,  once: true );
   else if (!checkbox.checked) 
    checkbox.addEventListener('click', function () 
      checkbox.indeterminate = true;
      checkbox.checked = false;
    ,  once: true );
  
  
,  capture: true );

<input type="checkbox" id="checkbox" />