如何阻止提交时复选框自动勾选并仅触发选中的API请求

嘿，我一眼就揪出问题所在了！咱们一步步拆解修复：

1. 核心错误：把「获取复选框状态」写成了「设置状态」 #

你代码里的 $('#maps').prop('checked',true) 是在主动设置这个复选框为选中状态，而不是读取它当前是否被勾选！这就是为什么每次提交时复选框会自动勾上，且所有API都会触发的根本原因。

正确的写法是去掉第二个参数，直接获取当前状态：

function fetchMap(city, callback){ 
  // 只读取复选框的选中状态，不修改它
  if ($('#maps').prop('checked')) { 
    const query = { 
      url: 'https://maps.googleapis.com/maps/api/geocode/json',
      data: { 
        address: city, 
        key: 'noobing' 
      }, 
      success: callback 
    } 
    $.ajax(query) 
  } 
}

同理，你的维基百科相关函数也要做同样修改，把 $('#wikipedia').prop('checked',true) 改成 $('#wikipedia').prop('checked')。

2. 修复label关联的小bug #

看你提供的HTML代码，第二个label的for属性写错了——它指向了maps的id，这会导致点击「Wikipedia」标签时，反而选中Maps的复选框：

<!-- 错误写法 -->
<input type='checkbox' value="wikipedia" id="wikipedia" > 
<label for='maps'>Wikipedia</label> 

<!-- 修正后：for属性要和对应input的id完全一致 -->
<input type='checkbox' value="wikipedia" id="wikipedia" > 
<label for='wikipedia'>Wikipedia</label> 

3. 排查提交事件的额外逻辑 #

还要确认你的提交按钮/表单处理函数里，有没有遍历所有复选框并强制设置checked: true的代码，如果有，一定要删掉类似这样的错误逻辑：

// 这种代码会强制勾选所有复选框，必须移除
$('input[type="checkbox"]').prop('checked', true);

验证效果 #

修改完成后，当用户勾选指定复选框并提交城市名称时，只有被选中的复选框对应的API会触发AJAX请求，复选框也不会再被自动勾选啦。

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