チェックボックスは、独立して

Question

私のJS関数はほとんど作品を動作していないが、チェックボックスはかなり独立して動作していません。

UPDATEを：私は=「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>

：あなたは、次のアプローチを使用して、期待される結果を得ることができます