如何追踪复选框组中特定复选框的状态变更事件

我来帮你搞定这个问题——要只监听value为map的复选框状态变化，其实可以通过更精准的元素定位来实现，而且你提供的示例代码里有个小语法错误，我先帮你指出来，再给出几种靠谱的解决方案。

先说说你原代码的问题 #

你写的$(this.value=='map')是错误的写法：这个表达式会先判断this.value是否等于map，得到一个布尔值，然后把这个布尔值作为选择器传给jQuery，这显然不是你想要的效果。正确的做法是直接判断this.value的值，或者先精准选中目标元素再绑定事件。

解决方案1：直接给目标复选框绑定事件（推荐） #

这种方法最高效，因为我们直接定位到value为map的复选框，只给它绑定change事件，不需要在回调里做额外判断：

// 精准选中name为proj且value为map的复选框
$('input:checkbox[name=proj][value="map"]').on('change', function() {
  if ($(this).is(':checked')) {
    console.log('Map is Checked');
  } else {
    console.log('Map is Unchecked');
  }
});

对应的HTML代码保持不变：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="checkbox" name="proj" value="map">map 
<input type="checkbox" name="proj" value="app">app 
<input type="checkbox" name="proj" value="nap">nap

解决方案2：给整个复选框组绑定事件，再判断目标元素 #

如果你的复选框是动态生成的，或者需要统一处理整个复选框组但只关注map的状态，那可以给整个组绑定事件，然后在回调里判断当前触发事件的元素是不是目标：

$('input:checkbox[name=proj]').on('change', function() {
  // 先判断当前复选框的value是否为map
  if (this.value === 'map') {
    if ($(this).is(':checked')) {
      console.log('Map is Checked');
    } else {
      console.log('Map is Unchecked');
    }
  }
});

这种方式的好处是，后续动态添加到这个组里的复选框（只要name是proj）也能触发事件，而如果是第一种方法，动态添加的元素需要重新绑定事件。

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