复选框上的隐藏元素单击/检查，在复选框上重新插入元素取消选中

Question

我正在学习Jquery所以请在这里向我承诺如果选中复选框＆gt;我想隐藏/删除DIVs内容

当复选框取消选中 时，我希望DIVs内容重新显示，（已选中复选框时隐藏了该内容。）

我设法解决了问题的第1部分，隐藏了内容，但我仍然坚持让内容重新出现。

YOU CAN VIEW MY JSFIDDLE HERE

任何帮助表示赞赏

Answer 1

$(function() {
    $('.return_to_pickup_location').click(function() { //fire when the button is clicked
        $('form input:checkbox').each(function() {
          var checkbox = $(this);  
          if(checkbox.is(':checked')) 
             $('.returnLocation').hide("slow");
          else
            $('.returnLocation').show("slow");

        });
    });
});

只需将show添加到else块中的元素。

Answer 2

如果您有单个复选框，则无需为每个循环

Updated fiddle

$(function() {
    $('#return_to_pickup_location').click(function() { //fire when the button is clicked
    if($(this).is(':checked'))
        $('.returnLocation').hide("slow");
    else
        $('.returnLocation').show("slow");
    });
});

Answer 3

只有在条件尝试添加其他条件时才进行编码，以获得所需的结果，如下面的代码

$(function() {
    $('.return_to_pickup_location').click(function() { //fire when the button is clicked
        $('form input:checkbox').each(function() {
          var checkbox = $(this);  
          if(checkbox.is(':checked')) $('.returnLocation').hide("slow");
          else
      $('.returnLocation').show("slow");
        });
    });
});