<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="width:30pxheight:30px display: nonemargin: 0pxbackground-color: red" id="lable" onclick="lable_click(this)" >
<!--<img width="30px" height="30px" src="xxx.png">或者背景图片
(点击无背景的checkbox使它变成成有背景色的对勾，
也可以如果用2个div，一个做没有对勾的背景一个做有对勾的背景，使checked一直处于隐藏状态，每次都用
document.getElementById('checked').checked = false)或document.getElementById('checked').checked = true)
使没有显示的checkbox改变它的checked值。
-->
</div>
<input id="checked" type="checkbox" value="" style="width: 30pxheight: 30pxdisplay: blockmargin: 0px" onclick ="checkbox_click(this)" />
<script>
function lable_click(obj){
obj.style.display = "none"
document.getElementById('checked').style.display = "block"
document.getElementById('checked').checked = false//
}
function checkbox_click(obj){
obj.style.display = "none"
document.getElementById('lable').style.display = "block"
}
</script>
</body>
</html>
html中框内打勾为checkbox复选框。
checkbox为HTML中 <input>标签的 type 属性下的值。
<input>标签用于搜集用户信息。在 HTML 中，<input>标签没有结束标签。在 XHTML 中，<input>标签必须被正确地关闭。
type 属性规定 input 元素的类型。<input type="checkbox" />定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项。
其使用例子如下：
打开为网页后页面如下：
扩展资料：
CheckBox是在HTML中让使用者与首页上的素材发生交互作用的一种方法。其中包含CheckBox控件就是我们一般所说的复选框，通常用于某选项的打开或关闭。
该控件表明一个特定的状态（即选项）是选定 (on，值为true) 还是清除 (off，值为false)。在应用程序中使用该控件为用户提供“True/False”或“yes/no”的选择。进行选项组合。
在 HTML 文档中 <input type="checkbox">每出现一次，Checkbox 对象就会被创建
您可以通过遍历表单的 elements[] 数组来访问某个选择框，或者通过使用 document.getElementById() 。
参考资料：百度百科_CheckBox的介绍
俺来提供个jquery版
<label><input name="" type="checkbox" value="" id="regText">同意注册协议</label><button type="submit" disabled id="regBtn">立即注册</button>var regBtn = $("#regBtn")
$("#regText").change(function(){
var that = $(this)
that.prop("checked",that.prop("checked"))
if(that.prop("checked")){
regBtn.prop("disabled",false)
}else{
regBtn.prop("disabled",true)
}
})
完整的效果演示参考http://www.51xuediannao.com/jiqiao/786.html
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）