Skip to content

Instantly share code, notes, and snippets.

@shaik2many

shaik2many/jquery-tutor-3.html

Created February 18, 2013 04:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save shaik2many/4975153 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save shaik2many/4975153 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jquery-tutor-3.html
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script>
$(document).ready(function() {//$(function(){
$('input[type=checkbox]').click(function() {
var ischeck = this.checked
path = $(this).attr('path')
$('input[path*="' + this.value + '"]').each(function(i, v) {
v.checked = ischeck
})
});
$('#mybutton').click(function(){
alert('Here is what you selected: '+$('#myform').serialize());
})
$("button, a").button()
});
</script>
</head>
<body>
<button id="mybutton">Get Form Data...</button>
<a href='#'>Hello I am an Anchor Tag</a>
<form id="myform">
<table width='100%'>
<tr valign='top'>
<td style="font-family: verdana;font-size:12px;"><ul>
<li class='tier2'><input name='business' type='checkbox' value='CP1000' path='/CP0000/CP1000' />CP1000</li>
<li class='tier3'><input name='business' type='checkbox' value='CG8000' path='/CP0000/CP1000/CG8000/xyz' />CG8000</li>
<li class='tier3'><input name='business' type='checkbox' value='CJ7000' path='/CP0000/CP1000/CJ7000' />CJ7000</li>
<li class='tier3'><input name='business' type='checkbox' value='CK2000' path='/CP0000/CP1000/CK2000' />CK2000</li>
<li class='tier3'><input name='business' type='checkbox' value='ID5000' path='/CP0000/CP1000/ID5000' />ID5000</li>
<li class='tier2'><input name='business' type='checkbox' value='CP2000' path='/CP0000/CP2000' />CP2000</li>
<li class='tier3'><input name='business' type='checkbox' value='CANADA' path='/CP0000/CP2000/CANADA' />CANADA</li>
<li class='tier3'><input name='business' type='checkbox' value='CMS' path='/CP0000/CP2000/CMS' />CMS</li>
<li class='tier3'><input name='business' type='checkbox' value='CORP' path='/CP0000/CP2000/CORP' />CORP</li>
<li class='tier4'><input name='business' type='checkbox' value='CP3000' path='/CP0000/CP2000/CORP/CP3000' />CP3000</li>
<li class='tier4'><input name='business' type='checkbox' value='CP3100' path='/CP0000/CP2000/CORP/CP3100' />CP3100</li>
<li class='tier4'><input name='business' type='checkbox' value='CP4000' path='/CP0000/CP2000/CORP/CP4000' />CP4000</li>
<li class='tier4'><input name='business' type='checkbox' value='CP5000' path='/CP0000/CP2000/CORP/CP5000' />CP5000</li>
<li class='tier4'><input name='business' type='checkbox' value='CP6000' path='/CP0000/CP2000/CORP/CP6000' />CP6000</li>
<li class='tier3'><input name='business' type='checkbox' value='INDIA' path='/CP0000/CP2000/INDIA' />INDIA</li>
</ul></td>
</tr>
</table>
</form>
</body>
<style>
ul {list-style: none;margin: 0px;}
ul li.tier1, ul li.tier2 { margin-left: 0px;}
ul li.tier3 { margin-left: 20px;}
ul li.tier4 { margin-left: 40px;}
.ui-widget {font-size: 11px;}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment