Question

我使用带有changeStatus函数的购物清单来更新点击元素。元素将自动过滤（顶部未打勾）。有时我会误点击某个元素，使其被打勾并被自动过滤，然后立即消失在列表的底部，所以我什至不知道已经打勾了哪个元素（购物时太糟糕了...）。

我想通过强制双击以选中/取消选中元素来防止这种情况，但是我不知道如何使用复选框来处理它。

<fieldset class="items-list">
        <label class="items-list-item" ng-repeat="item in items | filter : filterItem">
            <input
            type="checkbox"
            value="{{item.STATUS}}"
            ng-checked="item.STATUS==2"
            ng-click="changeStatus(item.ID,item.STATUS,item.ITEM)"
            class="items-list-cb"/>
            <span class="items-list-mark"></span>
            <span class="items-list-desc" ng-class="{strike:item.STATUS==2}">{{item.ITEM}}</span> 
            <a ng-click="deleteItem(item.ID)" class="pull-right red"><i class="fa fa-minus-circle"></i></a> 
        </label>
    </fieldset>

Answer 1

尝试此代码：

$(document).ready(function() {
  $(".dbl").click(function(e) {
    e.preventDefault();
  });
  $(".dbl").dblclick(function(e) {
    let myCheckbox = $("input[type=checkbox]", this);
    myCheckbox.prop("checked", !myCheckbox.prop("checked"));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="dbl"><input class="dbl" type="checkbox">double click to tick/untick element</label>

Answer 2

这可以通过在输入代码中添加onclick和ondblclick来完成。单击后，onclick会删除支票，但是如果双击ondblclick会添加支票。

<p>Double-click ads a check, while single click removes the check.</p>

<input type="checkbox" onclick="this.checked = false" ondblclick="this.checked = true">

Answer 3

下面的代码在onclick="return false"的帮助下忽略了单击，并在ondblclick="this.checked = !this.checked"的帮助下在双击上打了勾。

<input type="checkbox" onclick="return false" ondblclick="this.checked = !this.checked" />

如何双击以选中一个复选框？

3 个答案: