Question

我有以下代码：

checkbox.addEventListener('mousedown', function () {
    if (!this.checked) {
        this.checked = true;
    }
});

当按下鼠标按钮时，它应该打开复选框。它可以正常工作，但是当我释放按钮时，该复选框会关闭。我该如何解决？

Answer 1

checkbox.addEventListener('mousedown', function(){
    if(!this.checked) {
        var preventUnselect = function(){
            this.checked = true;            
            checkbox.removeEventListener('click', preventUnselect)
        };
        checkbox.addEventListener('click', preventUnselect)
        this.checked = true;
    }
});

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

我非常确定您的复选框未选中，因为复选框的默认行为是单击后更改其状态。如果在鼠标按下后选中复选框，则单击事件完成后，状态将被切换（变为未选中状态）。只需单击复选框，然后将鼠标指针移到其外部，同时仍然按住鼠标左键-松开按钮时，复选框将不会处于未选中状态。

您必须在鼠标按下后绑定click事件，然后再删除该事件。如果未删除事件，则将永远选中您的复选框。

Answer 2

checkbox.addEventListener('mousedown', function(){
    this.checked = !this.checked;
});

Answer 3

请注意，复选框已经具有此行为，这是浏览器内置的默认行为。我想查看是否已选中一个复选框，您可以简单地查看DOM元素的checked属性。例如：

const checkbox = document.getElementById('Mycheckbox');

// this onclick now purely for demonstration purposes
checkbox.addEventListener('click', function () {
    console.log(checkbox.checked);
});

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

如何选中带有mousedown事件的复选框？

3 个答案: