如何使用jQuery实现点击图片选中相邻的复选框

首先，你的代码里的核心问题是closest()方法的使用不对——closest()需要传入一个选择器参数来指定要查找的祖先元素，不传参数的话它会直接匹配到最顶层的document对象，自然找不到你需要的复选框。

接下来给你两种可行的修改方案：

方案1：通过父容器定位复选框 #

因为图片和复选框都在同一个.col-md-2容器里，你可以先找到这个父容器，再在容器内查找复选框：

$(document).ready(function () {
  $(".developerlocationselection").click(function () {
    // 先找到当前图片所在的.col-md-2容器，再找里面的复选框
    $(this).closest('.col-md-2').find('input[type=checkbox]').prop('checked', function(i, val) {
      // 用函数切换选中状态，点击图片可勾选/取消勾选
      return !val;
    });
  });
});

方案2：直接查找同级的复选框 #

因为复选框是图片的直接同级元素，你也可以用siblings()方法直接定位：

$(document).ready(function () {
  $(".developerlocationselection").click(function () {
    // 直接找当前图片的同级复选框
    $(this).siblings('input[type=checkbox]').prop('checked', function(i, val) {
      return !val;
    });
  });
});

额外说明 #

• 我把prop('checked', true)改成了回调函数，这样点击图片可以切换复选框的选中状态（点一下勾选，再点一下取消），如果只需要单向勾选，把回调改回true即可。
• 另外，on('click', function(){})和click(function(){})功能等价，不过如果你的图片是后续动态生成的，推荐用事件委托写法：$(document).on('click', '.developerlocationselection', function(){})，这样动态添加的元素也能触发点击事件。

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