jeudi 12 avril 2018

Hides wrong div when checkbox is un checked in jQuery?

I am new to jquery and JS stuff. I am working on a project where I want to show and hide div based on checked checkbox as image. but it does not display the corresponding div. Please help me improve my logic.

<div class="col-md-3"><label class="btn btn-primary"><img class="retina" src="" 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="" 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="" 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="" alt="..." class="img-thumbnail img-check"><input type="checkbox" name="chk4" id="zipper" value="val4" class="hidden" autocomplete="off"></label></div>

When I click on any of above image according to below div should be displayed as specified in 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 I wrote is

<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>

Thanks in advance.

Aucun commentaire:

Enregistrer un commentaire