<!DOCTYPE html>
<html>
<head>
<title>Onclick select All tutorials</title>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
body{
font-family:Verdana;
font-size:13px;
}
#content_pane{
width:400px;
margin:0 auto;
overflow:hidden;
border:1px solid #ccc;
border-radius:5px;
padding:10px;
}
</style>
</head>
<body>
<div id="content_pane">
<form action="" method="post">
<input id="checkAll" type="checkbox" name="selectAll"/>Select All
<p><input class="purchase" type="checkbox" name="product1"/>HTML</p>
<p><input class="purchase" type="checkbox" name="product2"/>CSS</p>
<p><input class="purchase" type="checkbox" name="product3"/>PHP</p>
<p><input class="purchase" type="checkbox" name="product4"/>jQuery</p>
<input class="purchase" type="submit" name="submit"/>
</form>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#checkAll').click(function(){
var c = this.checked;
$('input[type="checkbox"]').each(function(){
$(this).prop('checked',c);
});
}
);
});
</script>
</body>
</html>
<html>
<head>
<title>Onclick select All tutorials</title>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
body{
font-family:Verdana;
font-size:13px;
}
#content_pane{
width:400px;
margin:0 auto;
overflow:hidden;
border:1px solid #ccc;
border-radius:5px;
padding:10px;
}
</style>
</head>
<body>
<div id="content_pane">
<form action="" method="post">
<input id="checkAll" type="checkbox" name="selectAll"/>Select All
<p><input class="purchase" type="checkbox" name="product1"/>HTML</p>
<p><input class="purchase" type="checkbox" name="product2"/>CSS</p>
<p><input class="purchase" type="checkbox" name="product3"/>PHP</p>
<p><input class="purchase" type="checkbox" name="product4"/>jQuery</p>
<input class="purchase" type="submit" name="submit"/>
</form>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#checkAll').click(function(){
var c = this.checked;
$('input[type="checkbox"]').each(function(){
$(this).prop('checked',c);
});
}
);
});
</script>
</body>
</html>
0 comments:
Post a Comment