如何在鼠标按下事件上更改类型复选框的 HTML 输入的值

How to change the value of HTML input of type checkbox on mouse down event

本文关键字：复选框 类型 HTML 输入 鼠标 事件      更新时间：2023-09-26
实现这一目标

的最佳方法是什么？这也应该（自然地）禁用默认的鼠标向上事件，默认情况下，这将更改复选框的值。

HTML：

<input type="checkbox" name="mycheckbox" value="checkme" />

JavaScript：

var checkbox = document.getElementsByName("mycheckbox")[0];
checkbox.addEventListener("mousedown", function(e){
    if(!e){ e = window.event; }
    //Stop checkbox from being toggled on IE9 & Other Browsers
    if(e.stopPropagation){ e.stopPropagation(); }
    //Stop checkbox from being toggled on IE8 and Lower
    else{ e.cancelBubble = true; }
    //Toggle the checkbox yourself instead
    checkbox.checked = (checkbox.checked) ? true : false;
    //And you can also change the value of the checkbox
    checkbox.value="newvalue";
});

如何在复选框上设置单击功能

$(document).on('click', '#myCheckBoc', function(e){
    e.preventDefault();
    alert($(this).val()); //initial value
    $(this).val('15');    
    alert($(this).val()); //changed value
});

小提琴

通过一些假设，我想出了这个工作代码片段：

如果您需要其他东西，请告诉我。

document.getElementById("checkboxValue").innerHTML = document.getElementById("checkbox").value;
document.getElementById("checkbox").onmousedown = function(e){
  e.preventDefault();
  
  alert("Changing checkbox value...");
  
  this.value = "value2";
  
  document.getElementById("checkboxValue").innerHTML = "value2";
};
<input type="checkbox" id="checkbox" value="value1" />
<p>Checkbox Value: <span id="checkboxValue"></span></p>

checkbox.onclick = (e) => e.preventDefault(); // disable built-in behaviour
checkbox.onmousedown = (e) => {
    checkbox.checked = !checkbox.checked;
    // if you need it to still fire 'change' event:
    checkbox.dispatchEvent(new Event('change'));
}

其他答案要么禁用了错误的事件（e.preventDefault()应该在click上调用，而不是在mousedown上调用），要么错过了mousedown部分。

相关文章：