利用jquery实现图形多选复选框



24 94 32



特效描述:利用jquery实现 图形多选 复选框,利用jquery实现图形多选复选框

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

2. HTML代码

	<form action="">
		<fieldset>
			<legend>Choose some stuff...</legend>
				<input name="jqdemo" value="value1" type="checkbox" id="choice1"/> <label for="choice1">Choice one</label>
				<input name="jqdemo" value="value2" type="checkbox" id="choice2"/> <label for="choice2">Choice two</label>
				<input name="jqdemo" value="value3" type="checkbox" id="choice3" checked="checked"/> <label for="choice3">Choice three</label>
				<input name="jqdemo" value="value4" type="checkbox" id="choice4"/> <label for="choice4">Choice four</label>
			<br/><br/>
			<button type="submit" name="submitbutton" title="Submit the form">Send it!</button>
		</fieldset>
	</form>
	<form action="">
		<fieldset>
			<legend>Choose some stuff...</legend>
			<ul class="checklist">
				<li>
					<input name="jqdemo" value="value1" type="checkbox" id="choice_a"/>
					<label for="choice_a">Here's the 1st selection</label>
					<a class="checkbox-select" href="#">Select</a>
					<a class="checkbox-deselect" href="#">Cancel</a>
				</li>
				<li>
					<input name="jqdemo" value="value2" type="checkbox" id="choice_b"/>
					<label for="choice_b">Here's the 2nd selection</label>
					<a class="checkbox-select" href="#">Select</a>
					<a class="checkbox-deselect" href="#">Cancel</a>
				</li>
				<li>
					<input name="jqdemo" value="value3" type="checkbox" id="choice_c" checked="checked"/>
					<label for="choice_c">Here's the 3rd selection</label>
					<a class="checkbox-select" href="#">Select</a>
					<a class="checkbox-deselect" href="#">Cancel</a>
				</li>
				<li>
					<input name="jqdemo" value="value4" type="checkbox" id="choice_d"/>
					<label for="choice_d">Here's the 4th selection</label>
					<a class="checkbox-select" href="#">Select</a>
					<a class="checkbox-deselect" href="#">Cancel</a>
				</li>
			</ul>
			<div style="clear: both;"></div>
			<button class="sendit" type="submit" name="submitbutton" title="Submit the form">Send it!</button>
		</fieldset>
	</form>
<div style="text-align:center;clear:both">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 切换按钮 表单 表单美化 表单插件 表单美化插件 复选框 复选按钮 复选框美化 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到