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

$('.country').click(function () {
  $('.' + $(this).attr('id')).toggleClass('hide');
  // or $('.' + this.name).toggleClass('hide');
});

http://jsbin.com/sisawe/3/

Answer 2

干得好：

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

Answer 3

以下是你将如何做到这一点

$(document).ready(function() {
    $('.country').on('click', function() {
        $('.' + this.name).toggleClass( 'hide' );
    });
});

    $(document).ready(function() {
        $('.country').on('click', function() {
            $('.' + this.name).toggleClass( 'hide' );
        });
    });

.hide {
  display:none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

但我认为这就是你的意图：

$(document).ready(function() {
    $('.country').on('change', function() {
        $('.' + this.name).toggleClass( 'hide', !this.checked );
    })
    .change();
});

    $(document).ready(function() {
        $('.country').on('change', function() {
            $('.' + this.name).toggleClass( 'hide', !this.checked );
        })
        .change();
    });

.hide {
  display:none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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 4

可以将事件处理程序委托给包含div的复选框，从而将处理程序仅附加到一个元素而不是多个元素。

也不需要隐藏＆＃39; class（除非它执行除hide之外的其他操作）。请改用.hide()和.show()。

详细说明：

$("#country").on('change', 'input', function() {
    var country = $(this).attr('name');
    if(this.checked) {
        $("#destination div." + country).show();
    } else {
        $("#destination div." + country).hide();
    }
}).find('input').trigger('change');

<强> DEMO

或简洁地说：

$("#country").on('change', 'input', function () {
    $("#destination div." + $(this).attr('name'))[['hide', 'show'][+this.checked]]();
}).find('input').trigger('change');

<强> DEMO

循环遍历名称列表并在单击侦听器上添加Jquery

4 个答案: