First you need some basic knowledge about jQuery. Please visit http://jquery.com/ for some guidance.
Example :)
<html>
<head>
<title>MaHi CSS Tution</title>
<style type="text/css">
#container{
padding:50px;
}
#btnOuterDIV{
height:30px;
width:80px;
border:1px solid #ccc;
border-radius:5px;
}
#btnOuterDIV:hover{
border-color:#888;
overflow:hidden;
cursor:pointer;
}
#btnChkbox{
height:15px;
width:15px;
float:left;
padding-top:5px;
padding-left:5px;
}
#btnLabel{
height:70%;
width:60%;
font-size:10px;
float:left;
padding-top:10px;
padding-left:5px;
}
#btnLabel:hover{
color:blue;
}
</style>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="container">
<div id="btnOuterDIV">
<div id="btnChkbox">
<input type="checkbox" id="btnCB" />
</div>
<div id="btnLabel">
Click Me
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$('#btnOuterDIV').click(function(){
alert('You clicked the button');
$('#btnCB').prop('checked',true);
});
});
</script>
</body>
</html>
Output :)
1)
2)
Example :)
<html>
<head>
<title>MaHi CSS Tution</title>
<style type="text/css">
#container{
padding:50px;
}
#btnOuterDIV{
height:30px;
width:80px;
border:1px solid #ccc;
border-radius:5px;
}
#btnOuterDIV:hover{
border-color:#888;
overflow:hidden;
cursor:pointer;
}
#btnChkbox{
height:15px;
width:15px;
float:left;
padding-top:5px;
padding-left:5px;
}
#btnLabel{
height:70%;
width:60%;
font-size:10px;
float:left;
padding-top:10px;
padding-left:5px;
}
#btnLabel:hover{
color:blue;
}
</style>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="container">
<div id="btnOuterDIV">
<div id="btnChkbox">
<input type="checkbox" id="btnCB" />
</div>
<div id="btnLabel">
Click Me
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$('#btnOuterDIV').click(function(){
alert('You clicked the button');
$('#btnCB').prop('checked',true);
});
});
</script>
</body>
</html>
Output :)
1)
2)
No comments:
Post a Comment