如何在复选框勾选时用jQuery .closest()方法获取输入框值？

问题根源 #

你代码里的$(this).closest("div.aid_closest")无法找到目标元素，因为closest()是从当前元素（checkbox）向上遍历DOM树寻找祖先元素，但div.aid_closest是checkbox的同级兄弟元素，并非祖先，所以返回空的jQuery对象，调用val()自然得到undefined。

修复后的代码 #

可以通过以下两种方式修改脚本：

方案1：通过父元素定位目标输入框

$('input[type="checkbox"]').click(function(){
  var aid = $(this).parent().find("input[name='aid']").val();
  if($(this).is(":checked")){
    alert(aid);
  }
});

方案2：通过兄弟元素定位目标输入框

$('input[type="checkbox"]').click(function(){
  var aid = $(this).siblings("div.aid_closest").find("input[name='aid']").val();
  if($(this).is(":checked")){
    alert(aid);
  }
});

简化优化（可选） #

因为目标输入框有唯一ID，也可以直接简化查找逻辑：

$('input[type="checkbox"]').click(function(){
  var aid = $("#aid").val();
  if($(this).is(":checked")){
    alert(aid);
  }
});

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