在jQuery中未选中复选框时隐藏错误的div？

Question

我是jquery和JS的新手。 我正在开发一个项目，我希望根据选中的复选框显示和隐藏div作为图像。但它不会显示相应的div。 请帮我改进逻辑。

<div class="col-md-3"><label class="btn btn-primary"><img class="retina" src="{{asset('app/img/logo.png')}}" alt="..." class="img-thumbnail img-check"><input type="checkbox" name="chk1" id="hemming" value="val1" class="hidden" autocomplete="off"></label></div>
  <div class="col-md-3"><label class="btn btn-primary"><img class="retina" src="{{asset('app/img/logo.png')}}" alt="..." class="img-thumbnail img-check"><input type="checkbox" name="chk2" id="button" value="val2" class="hidden" autocomplete="off"></label></div>
  <div class="col-md-3"><label class="btn btn-primary"><img class="retina" src="{{asset('app/img/logo.png')}}" alt="..." class="img-thumbnail img-check"><input type="checkbox" name="chk3" id="patch" value="val3" class="hidden" autocomplete="off"></label></div>
  <div class="col-md-3"><label class="btn btn-primary"><img class="retina" src="{{asset('app/img/logo.png')}}" alt="..." class="img-thumbnail img-check"><input type="checkbox" name="chk4" id="zipper" value="val4" class="hidden" autocomplete="off"></label></div>

当我点击下面的任何一个图像时，div应该按照js。

中的指定显示

  <div class="count" id="hemmingcount" style=" display:none;">
        <div class="col-md-3">
      <div class="input-group number-spinner">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button" data-dir="dwn"><span class="glyphicon glyphicon-minus"></span></button>
                </span>
                <input type="text" class="form-control text-center" value="0" placeholder="hemming">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button" data-dir="up"><span class="glyphicon glyphicon-plus"></span></button>
                </span>
            </div>
        </div>
    </div>
  <div class="count" id="buttoncount" style=" display:none;">
  <div class="col-md-3">
      <div class="input-group number-spinner">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button" data-dir="dwn"><span class="glyphicon glyphicon-minus"></span></button>
                </span>
                <input type="text" class="form-control text-center" value="0" placeholder="button">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button"  data-dir="up"><span class="glyphicon glyphicon-plus"></span></button>
                </span>
            </div>
    </div>
  </div>
  <div class="count" id="patchcount" style=" display:none;">
<div class="col-md-3">
      <div class="input-group number-spinner">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button" data-dir="dwn"><span class="glyphicon glyphicon-minus"></span></button>
                </span>
                <input type="text" class="form-control text-center" value="0" placeholder="patch">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button" data-dir="up"><span class="glyphicon glyphicon-plus"></span></button>
                </span>
            </div>
    </div>
  </div>
  <div class="count" id="zippercount" style=" display:none;">
<div class="col-md-3">
      <div class="input-group number-spinner">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button" data-dir="dwn"><span class="glyphicon glyphicon-minus"></span></button>
                </span>
                <input type="text" class="form-control text-center" value="0" placeholder="zipper">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button" data-dir="up"><span class="glyphicon glyphicon-plus"></span></button>
                </span>
            </div>
    </div>
  </div>

我写的脚本是

<script type="text/javascript">
$(document).ready(function(e){
            $(".img-check").click(function(){
                $(this).toggleClass("check");
            });
    });


$(function () {
      $("#hemming").click(function () {
          if ($(this).is(":checked")) {
              $("#hemmingcount").show();
          }
           else {
              $("#hemmingcount").hide();
          }
      });
  });

  $(function () {
        $("#patch").click(function () {
            if ($(this).is(":checked")) {
                $("#patchcount").show();
            } else {
                $("#patchcount").hide();
            }
        });
    });

    $(function () {
          $("#button").click(function () {
              if ($(this).is(":checked")) {
                  $("#buttoncount").show();
              } else {
                  $("#buttoncount").hide();
              }
          });
      });

      $(function () {
            $("#zipper").click(function () {
                if ($(this).is(":checked")) {
                    $("#zippercount").show();
                } else {
                    $("#zippercount").hide();
                }
            });
        });
</script>

提前致谢。