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

Posted 2023-03-05

【中文标题】在纯js中选中和取消选中复选框时添加不同的确认消息

【英文标题】：Add different confirm message when checking and unchecking a checkbox in plain js

【发布时间】：2022-01-23 21:51:53

【问题描述】：

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

目前我有这个：

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

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

【参考方案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>

根据真/假值，您也可以显示不同的消息。取消注释 else 子句以查看。

【讨论】：

好极了。完美运行。

当然。如果对您有帮助，请考虑投票/接受答案