jQuery点击复选框弹出工作地点选项交互

点击复选框弹出工作地点选项的交互，在招聘网站上挺常见的，用户体验也不错。用 jQuery 来搞这个，其实不复杂，还挺好上手的。你只需要监听一下checkbox的点击事件，再配合一个隐藏的模态框就行。

模态框可以先用display: none藏起来，等用户点击勾选后再用fadeIn让它优雅地弹出来，交互感觉也更顺滑。像下面这种方式就比较常用：

$('input[type="checkbox"]').click(function() {
  if (this.checked) {
    $('#locationModal').fadeIn();
  } else {
    $('#locationModal').fadeOut();
  }
});

模态框里的内容你可以写死，也可以从服务器拿，用 Ajax 配合后端接口也挺方便。对用户来说，能弹出详细选项比单个复选框强多了。

要注意的是，最好加个关闭按钮，甚至可以支持按ESC关弹窗。这样用起来更灵活，也符合大部分用户习惯。

如果你想看看完整代码，或者直接套用人家现成的效果，可以看看这些资源，像jQuery 人才网弹出层选择工作地区特效这个，还挺实用的。

，jQuery 做这类交互还是靠谱的，代码清爽、响应快。如果你正好做职位筛选、简历筛选那类功能，不妨用上这招。