复选框不能独立工作

Question

我的js功能几乎可以工作，但复选框不能独立工作：

更新：我通过添加parent ='NULL'来修复此问题;在功能的最后。有人可以解释发生了什么吗？

function detectDiv(obj) {
  var parent = obj.parentElement;
  console.log(parent.id);
  
  
   $('input:checkbox').change(function(){
    if($(this).is(":checked")) {
        $("#"+parent.id).removeClass("grey100");
    } else {        $("#"+parent.id).addClass("grey100");
    }

    parent='NULL';
});

  
   
  
  
}

.grey100 {
    
            opacity: 0.5;
}

img{
width:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div >
<table>
   <tr>
      <td id='img1' class='grey100'>
<img src="https://res.cloudinary.com/rss81/image/upload/gw.jpg"><br>
<input type="checkbox" onclick="detectDiv(this)" >
      </td>
      <td id='img2' class='grey100'>
<img src="https://res.cloudinary.com/rss81/image/upload/gw.jpg"><br>
<input type="checkbox"  onclick="detectDiv(this)" >
      </td>
      </tr>
 </table>
</div>

Answer 1

我没有看到使用带有嵌套jQuery函数的单独函数来处理它的意义。您可以使用以下方法获得预期结果：

$('input:checkbox').change(function() {
  $(this).parent().find('img').toggleClass("grey100");
});

.grey100 {
  opacity: 0.5;
}

img {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <table>
    <tr>
      <td id='img1'>
        <img src="https://res.cloudinary.com/rss81/image/upload/gw.jpg"><br>
        <input type="checkbox">
      </td>
      <td id='img2'>
        <img src="https://res.cloudinary.com/rss81/image/upload/gw.jpg"><br>
        <input type="checkbox">
      </td>
    </tr>
  </table>
</div>