单选按钮未选中时触发条件判断、避免重复弹窗的JS实现方法

需求说明 #

需要实现如下单选按钮交互逻辑：

• 当目标单选按钮处于未选中状态、用户点击将其选中时，弹出对应确认提示
• 用户重复点击已经处于选中状态的同一单选按钮时，不弹出确认提示
• 用户从其他同名单选按钮切换到当前按钮时，正常弹出确认提示

具体提示规则：

• 选中配送方式为国内（Domestic）时，弹出confirm('You want domestic?')
• 选中配送方式为国际（international）时，弹出confirm('You want internation?')

现有代码 #

HTML结构 #

<input  type="radio" id="#radio_button_id_1" name="shipping_information" 
        class="form-radio icustom-control-input">
<label> Domestic <label>

<input  type="radio" id="#radio_button_id_2" 
        name="shipping_information" class="form-radio icustom-control-input">
<label> internation<label>

注意：现有HTML的id属性值自带#属于不规范写法，会和jQuery的id选择器语法冲突，建议将id值修正为radio_button_id_1、radio_button_id_2。下文代码通过name属性绑定事件，可直接兼容两种id写法。

原有jQuery代码 #

$(document).on('click', '#radio_button_id_1', function(event){
  // apply condition if radio button is already not checked/Clciked
   if (confirm('You want domestic?')) {
        
      } else {
        event.preventDefault();
      }

 });

$(document).on('click', '#radio_button_id_2', function(event){
  // apply condition if radio button is already not checked/Clciked
   if (confirm('You want internation?')) {
        
      } else {
        event.preventDefault();
      }

 });

问题原因 #

原有代码未判断点击触发时单选按钮的选中状态：单选按钮的click事件触发在浏览器执行默认选中行为之前，此时读取this.checked拿到的是点击前的旧状态，原有代码跳过了这个判断，导致无论是否选中都会触发弹窗。

修正后代码 #

// 通过name属性统一绑定同组单选按钮事件，无需分开写监听
$(document).on('click', 'input[name="shipping_information"]', function(event) {
  // 读取点击前的选中状态
  const checkedBeforeClick = this.checked;
  // 点击前已经是选中状态，属于重复点击，直接返回不弹窗
  if (checkedBeforeClick) {
    return;
  }
  // 未选中状态下点击属于切换操作，匹配对应确认文案
  const confirmMsg = this.id.includes('radio_button_id_1') 
    ? 'You want domestic?' 
    : 'You want internation?';
  // 用户点击取消则阻止默认选中行为
  if (!confirm(confirmMsg)) {
    event.preventDefault();
  }
});

逻辑验证 #

• 初始状态下点击任意单选按钮：按钮点击前为未选中状态，正常弹出对应确认框
• 已选中某按钮时重复点击该按钮：按钮点击前为已选中状态，直接返回无弹窗
• 已选中A按钮时点击B按钮切换：B按钮点击前为未选中状态，正常弹出B对应的确认框

所有场景均符合需求要求。

内容的提问来源于stack exchange，提问作者Pankaj Kumar