复选框


默认点击文字也会勾选,不需要在外面包一层label
普通复选框
复选框未选中
复选框选中
复选框未选中(只读)
复选框选中(只读)
普通复选框改变大小
代码

如果没有文字,则必须写一个空格 或者 直接用label标签包起来

<input type="checkbox" class="fill"/>复选框未选中
<input type="checkbox" class="fill" checked/>复选框选中
<input type="checkbox" class="fill" disabled="disabled"/>复选框未选中(只读)
<input type="checkbox" class="fill" checked disabled="disabled"/>复选框选中(只读)

<!--普通复选框改变大小,需要在外面套一层 label 标签-->
<label zoom="1.5"><input type="checkbox" class="fill" checked/>改变大小</label>

开关样式的复选框(支持onchange事件)
未选中: 选中(改变大小):
代码
<!--开关样式需指定class为switch,如果你想改变大小,可以直接添加zoom属性--->
未选中:<input type="checkbox" class="switch" onchange="test(this)"/>
选中(改变大小):<input type="checkbox" class="switch" checked zoom="1.5"/>

<script>
	function test(obj) {
		alert("切换了");
//		$(obj).attr("checked", false);
// 或
//		$(obj).prop("checked", false);
	}
</script>

普通全选(常用于表格全选)
父级:listen-X,子级: listen-X-(X+1)
父级:
子级:
子级(禁用):
子级:
代码
父级:<input type="checkbox" class="fill listen-1" /> <br />
子级:<input type="checkbox" class="fill listen-1-2" name="id" value="1" /> <br />
子级(禁用):<input type="checkbox" class="fill listen-1-2" name="id" value="2" disabled="disabled"/> <br />
子级:<input type="checkbox" class="fill listen-1-2" name="id" value="3" /> 

高级全选
爷爷辈:listen-X,父辈:listen-X-(X+1),子辈: listen-X-(Max(X+1)+1)
全选
前端
后台
  • 貂蝉
  • 西施(禁用)
  • 王昭君
  • 刘备
  • 关羽
  • 张飞
代码
<div class="grid-1-1-3">
	<div>
		<input type="checkbox" class="fill listen-3"/>全选
	</div>
	<div>
		<div><input type="checkbox" class="fill listen-3-4"/>前端</div>
		<div><input type="checkbox" class="fill listen-3-5"/>后台</div>
	</div>
	<div>
		<div>
			<ul class="equal-3">
				<li><input type="checkbox" class="fill listen-3-4-6"/>貂蝉</li>
				<li><input type="checkbox" class="fill listen-3-4-6" disabled="disabled"/>西施(禁用)</li>
				<li><input type="checkbox" class="fill listen-3-4-6"/>王昭君</li>
				<span class="clearfix"></span>
			</ul>
		</div>
		<div>
			<ul class="equal-3">
				<li><input type="checkbox" class="fill listen-3-5-6"/>刘备</li>
				<li><input type="checkbox" class="fill listen-3-5-6"/>关羽</li>
				<li><input type="checkbox" class="fill listen-3-5-6"/>张飞</li>
				<span class="clearfix"></span>
			</ul>
		</div>
	</div>
</div>

伪复选框(一定要在外面包一层label)
代码
<!--在label标签上添加class即可(选中和未选中的class不要加)-->
<label class="button"><input type="checkbox" class="fake" name="checkbox3" value="1" checked/>已选中</label>
<label class="button"><input type="checkbox" class="fake" name="checkbox3" value="2"/>未选中</label>

<script>
	javaex.fakeCheckbox({
		name : "checkbox3",
		uncheckClass : "wathet", // 未选中时添加的class
		checkedClass : "blue" 	// 选中时添加的class
	});
</script>
参数说明(使用属性默认值时,可以缺省该属性)
序号 属性名 默认值 说明
1 name checkbox的name属性
2 uncheckClass 未选中时往label标签添加的class
3 checkedClass 选中时往label标签添加的class