複数の入力チェックボックスによるJQueryのループ

Question

複数のdiv内に1つのチェックボックスを持つことが任されています。このチェックボックスをオンにすると、divを非表示にします。私はこの機能を実装するためにJqueryを使用したいと思います。私は近くにいると感じていますが、何かが欠けていると感じます。

ここに私のコードがあり、助けがあれば幸いです。最も近い方法を使用して、

$("#removeLeg").click(function() { 
    $('.delCheck:checked').each(function() { 
    //   ^^^^^^^^ -> look it filters only checked elements 

     $(this).parent().hide(); 

    }); 
}); 

あるいは、より正確な：

$(this).closest('.elementGroup').hide(); 

Answer 1

あなたのeach関数では、関数が返す配列内の項目の値を基にします。

Answer 2

ので、あなたは、単に親要素を見つけることができます

おかげで、

蘆花

<div id='legGroup1' class="elementGroup"> 
    <input type="checkbox" class="delCheck" id="1" />Delete</label> 
</div> 

<div id='legGroup2' class="elementGroup"> 
    <input type="checkbox" class="delCheck" id="2" />Delete</label> 
</div> 

<button type='button' id='removeLeg'></button> 

$("#removeLeg").click(function (e) { 
    $('.delCheck').each(function() { 
     if (this.id.prop('checked')) { 
      $("#legGroup" + this.id).hide(); 
     } 
    }); 
}); 

Answer 3

まず、HTMLにlabelというタグがありません。

<label><input type="checkbox" class="delCheck" id="1" />Delete</label> 

clickイベントについては、チェックボックスをオンにして、最も近いdivの親を非表示にすることができます。

$(document).ready(function(){ 
    $('#removeLeg').on('click', function(){ 
     $('.delCheck:checked').each(function(){ 
      $(this).parents('div').hide(); 
     }); 
    }); 
}); 

ここでデモです：https://jsfiddle.net/nx9e1yp5/1/