javascript - 遍历名称列表并在点击监听器上添加 Jquery

Question

我正在尝试将其设置为，对于检查中带有 country 类的每个复选框，都会在 div 上找到带有 this 属性名称和 toggleClass 的每个输入。它仅适用于第一个输入。

$(".country").each(function(){
  var country_name = $(this).attr('name');
 if(this.click) {
    $("."+country_name).each(function() {
                $( this ).toggleClass('hide');
            });
}
 });


<div id="country" class="form-group">
    <label>Country</label><br>
    <input class="country" id="Kenya" type="checkbox" value="Kenya" name="Kenya"> Kenya<br>
    <input class="country" id="Uganda" type="checkbox" value="xxx" name="Uganda"> Uganda<br>
    <input class="country" id="Tanzania" type="checkbox" value="xxx" name="Tanzania"> Tanzania<br>
  </div>

  <div id="destination" class="form-group">
    <label>Destination</label><br>
    <div class="Kenya"><input type="checkbox" value="xxx" name="des1"> Maasai Mara<br></div>
    <div class="Kenya"><input type="checkbox" value="xxx" name="des2"> Serengeti<br></div>
    <div class="Kenya"><input type="checkbox" value="xxx" name="des3"> KWS<br></div>

    <div class="Uganda"><input type="checkbox" value="xxx" name="des1"> Maasai Mara<br></div>
    <div class="Uganda"><input type="checkbox" value="xxx" name="des2"> Serengeti<br></div>
    <div class="Uganda"><input type="checkbox" value="xxx" name="des3"> KWS<br></div>

    <div class="Tanzania"><input type="checkbox" value="xxx" name="des1"> Maasai Mara<br></div>
    <div class="Tanzania"><input type="checkbox" value="xxx" name="des2"> Serengeti<br></div>
    <div class="Tanzania"><input type="checkbox" value="xxx" name="des3"> KWS<br></div>
  </div>

Answer 1

简单地做:

$('input[type="checkbox"].country').on('click', function (){
    var name = $.trim(this.name);
    $('#destination div.' + name).toggleClass('hide');
});