复选框


默认点击文字也会勾选,不需要在外面包一层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"/>复选框选中(只读)
高级样式代码
<input type="checkbox" class="svg" />复选框未选中
<input type="checkbox" class="svg" checked />复选框选中
开关样式代码
<input type="checkbox" class="switch" />
<input type="checkbox" class="switch" checked />
支持onchange事件
<input type="checkbox" class="switch" onchange="test(this)"/>

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

伪多选
<!--在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
演示