Question

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

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

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

任何帮助表示赞赏！

Answer 1

您可以添加<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">HTML</a></li> <li><a tabindex="-1" href="#">CSS</a></li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> <li class="dropdown-submenu"> <a class="test" href="#">Another dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">3rd level dropdown</a></li> <li><a href="#">3rd level dropdown</a></li> </ul> </li> </ul> </li> </ul> </div>事件并在数据属性中存储状态值。

＆＃13;

click

＆＃13;

$(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);
    }
  });
};

＆＃13;

在我的示例中，我从<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，但我想给出一个对其他人也有用的完整答案。

Answer 2

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

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

使用is（）with：选中以获得结果为boolean，如果选中复选框则为true。

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

Answer 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" />

我们怎样才能获得复选框的先前状态？

3 个答案: