javascript全部选中checkbox 实例-tkchks-ChinaUnix博客

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="en" lang="en">
<head>
<title>frequency decoder - unobtrusive check/uncheck all form checkboxs demo</title>
<link rel="stylesheet" type="text/css" href="/css/fdbasic.css" media="screen" />
<script type="text/javascript">
</script>
<style type="text/css">
body
{
padding:0;
border:0;
margin:0;
text-align:center;
font-family:georgia, Trebuchet MS, lucida grande, lucida sans unicode, Tahoma, verdana, arial, sans-serif;
font-size:11px;
line-height:16px;
font-family: "Lucida Grande","Lucida Sans Unicode",geneva,verdana,sans-serif;
color:#545454;
min-width: 800px;
border-top:3px solid #97BC45;
background:#fff url(../../media/gradient-e5e5e5-ffffff.gif) repeat-x 0 0;
}
form
{
width:800px;
padding:10px;
text-align:left;
background:#eee;
border:1px solid #ccc;
margin:0 auto 20px auto;
}
h1#frequency-decoder
{
margin:3em auto 2em auto;
}
h2
{
text-align:center;
}
p,
fieldset,
p.marginme
{
margin:0 0 1.4em 0;
}
legend
{
font-weight:900;
color:#222;
}
fieldset p
{
margin:0;
}
</style>
</head>
<body>
<h1 id="frequency-decoder" title="frequency-decoder"><a href="/" title="there’s no place like home, there’s no place like home…"><span>frequency decoder</span></a></h1>
<h2>Unobtrusive Check/Uncheck script</h2>
<form action="" method="" class="fdCheckbox-chkboxgroup">
<p>The following form contains two <em>sets</em> of checkboxs, one set given the <code>className</code> "chkboxgroup" (containing 3 checkboxs) and another no <code>className</code> at all (the last checkbox). The form itself has been given the <code>className</code> "fdCheckbox-chkboxgroup" which tells the script to create the check/uncheck buttons only for the group of checkboxs whose <code>className</code> includes (you guessed it), "chkboxgroup".</p>
<p>Additionally, no placeholder <code>div</code> is present and so the buttons are created as child elements of the form itself.</p>
<fieldset>
<legend>Multiple Checkbox group test 1</legend>
<p>
<input type="checkbox" name="somename1" class="chkboxgroup" value="1" id="cb1" /> : <label for="cb1">classname "chkboxgroup" 1<br /></label>
</p>
<p>
<input type="checkbox" name="somename2" class="chkboxgroup" value="2" id="cb2" /> : <label for="cb2">classname "chkboxgroup" 2<br /></label>
</p>
<p class="marginme">
<input type="checkbox" name="somename3" class="chkboxgroup" value="3" id="cb3" /> : <label for="cb3">classname "chkboxgroup" 3<br /></label>
</p>
<p class="marginme">The following checkbox should be left untouched by the check/uncheck action as it does not have the <code>className</code> "chkboxgroup":</p>
<p><input type="checkbox" name="extrachkbox" value="1" id="ex" /> : <label for="ex">no classname<br /></label></p>
</fieldset>
</form>
<form action="" method="" class="fdCheckbox-groupa fdCheckbox-groupb">
<p>The following form contains two <em>sets</em> of checkboxs, one given the <code>className</code> "groupa" (containing 3 checkboxs) and another the className "groupb" (also containing 3 checkboxs). The form has been given the <code>className</code> "fdCheckbox-groupa fdCheckbox-groupb" which tells the script to create individual check/uncheck buttons for both groups of checkboxs.</p>
<p>Additionally, a placeholder <code>div</code> for the button creation has been positioned above both of the checkbox groups.</p>
<fieldset>
<legend>Multiple Checkbox group test 2</legend>
<div class="button-placeholder-groupa"> </div>
<p>
<input type="checkbox" name="groupa1" class="groupa" value="1" id="cb4" /> : <label for="cb4">classname "groupa" 1<br /></label>
</p>
<p>
<input type="checkbox" name="groupa2" class="groupa" value="2" id="cb5" /> : <label for="cb5">classname "groupa" 2<br /></label>
</p>
<p class="marginme">
<input type="checkbox" name="groupa3" class="groupa" value="3" id="cb6" /> : <label for="cb6">classname "groupa" 3<br /></label>
</p>
<p class="marginme">The second group of checkboxs given the classname "groupb" starts here.</p>
<div class="button-placeholder-groupb"> </div>
<p>
<input type="checkbox" name="groupb1" class="groupb" value="1" id="cb7" /> : <label for="cb7">classname "groupb" 1<br /></label>
</p>
<p>
<input type="checkbox" name="groupb2" class="groupb" value="2" id="cb8" /> : <label for="cb8">classname "groupb" 2<br /></label>
</p>
<p>
<input type="checkbox" name="groupb3" class="groupb" value="3" id="cb9" /> : <label for="cb9">classname "groupb" 3<br /></label>
</p>
</fieldset>
<p>Read the <a href="">related post</a> (and view the source code to get a better idea of whats going on behind the scenes).
</form>
</body>
</html>