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