在普通 js 中选中和取消选中复选框时添加不同的确认消息

Question

我有两个页面需要在选中和取消选中某个框时显示相同的行为。检查时，我收到确认消息，单击“是”后，该框被选中。对于取消选中，我不想要显示消息，只是取消选中或另一个选项是显示确认消息，但与选中复选框时的消息不同。

目前我有这个：

let checkbox_elem = document.querySelectorAll('.first_class, .second_class');
checkbox_elem.forEach(elem => {
  elem.addEventListener("click", (e)=> {
    var message = 'Are you sure you want to CHECK this?';
    confirm(message) || e.preventDefault();
  });
});

在两个不同的页面上有两个class（first_class和second_class），但是无论我勾选还是取消勾选，它总是显示相同的信息。

Answer 1

只需为 checked 添加一个 if 条件属性:

let checkbox_elem = document.querySelectorAll('.first_class, .second_class');
checkbox_elem.forEach(elem => {
  elem.addEventListener("click", (e)=> {
  console.log(e.target.checked);
  if(e.target.checked){
    var message = 'Are you sure you want to CHECK this?';
    confirm(message) || e.preventDefault();
  }
  /*else{
    var message = 'Are you sure you want to UNCHECK this?';
    confirm(message) || e.preventDefault();
  }*/
  });
});

<input type="checkbox" class="first_class" name="scales"
         checked>
  <label for="scales">Scales</label>

基于 true/false 值，您也可以显示不同的消息。取消注释 else 子句以查看。

在普通 js 中选中和取消选中复选框时添加不同的确认消息

Add different confirm message when checking and unchecking a checkbox in plain js

javascript

checkbox

addeventlistener