Sunday 28 June 2015


Question :  I'm using check box in form. but when one check box is checked, show the detail div. and when multi check not show the div with jquery.

HTML code:
<input type="checkbox" name="cb1" id="cb1" />
<input type="checkbox" name="cb2" id="cb2" />
<input type="checkbox" name="cb3" id="cb3" />
<input type="checkbox" name="cb4" id="cb4" />
<div id="detail" style="display:none"></div>
Answer :
---------------------------------------------------------------------------------
<html>
<head>
<title>Demo</title>
<script src="js/jquery.min.js"></script>
<script>
    function checkIt(sender) {
        if ($(".checkme:checked").length == 1) {
            $("#detail").css({
                display:"block"
            });
        }
        else {
            $("#detail").css({
                display: "none"
            });
        }
    }
</script>
</head>
<body>
<input type="checkbox" name="cb1" id="cb1" class="checkme" onchange="checkIt(this);"/>
<input type="checkbox" name="cb2" id="cb2" class="checkme"  onchange="checkIt(this);" />
<input type="checkbox" name="cb3" id="cb3" class="checkme"  onchange="checkIt(this);" />
<input type="checkbox" name="cb4" id="cb4" class="checkme"  onchange="checkIt(this);"/>
<div id="detail" style="display: none">I am Here</div>
</body>
</html>

No comments:

Post a Comment