javascript实现checkbox复选框实例代码
本文实例介绍了javascript实现checkbox复选框实例代码以及对checkbox复选框进行美化操作，分享给大家供大家参考，具体内容如下
1、checkbox复选框进行美化操作
复选框默认外表的美观度差强人意，能够满足美观度要求不高的页面，但是如果对于页面要求较为精致，那可能就过于勉强了，下面就一段对复选框进行美化的代码实例，希望能够给大家带来一定的帮助。
代码实例如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>checkbox复选框</title>
<styletype="text/css">
.CheckBoxClass{display:none;}
.CheckBoxLabelClass{
background:url("mytest/jQuery/UnCheck.png")no-repeat;
padding-left:30px;
padding-top:3px;
margin:5px;
height:28px;
width:150px;
display:block;
}
.CheckBoxLabelClass:hover{text-decoration:underline;}
.LabelSelected{background:url("mytest/jQuery/Check.png")no-repeat;}
</style>
<scripttype="text/javascript"src="mytest/jQuery/jquery-1.8.3.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$(".CheckBoxClass").change(function(){
if($(this).is(":checked")){
$(this).next("label").addClass("LabelSelected");
}
else{
$(this).next("label").removeClass("LabelSelected");
}
});
})
</script>
</head>
<body>
<div>
<inputid="CheckBox1"type="checkbox"class="CheckBoxClass"/>
<labelid="Label1"for="CheckBox1"class="CheckBoxLabelClass">毛票票一</label>
<inputid="CheckBox2"type="checkbox"class="CheckBoxClass"/>
<labelid="Label2"for="CheckBox2"class="CheckBoxLabelClass">毛票票二</label>
</div>
</body>
</html>
2、checkbox复选框全选和取消全选实例代码
关于复选框的全选和不全选是非常常见的操作，本章节分享一段代码实例，能够实现多种选中和取消选中功能。
代码实例如下:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>毛票票</title>
<scripttype="text/javascript"src="mytest/jQuery/jquery-1.8.3.js"></script>
<scripttype="text/javascript">
$("document").ready(function(){
$("#all").click(function(){
if(this.checked)
{
$("input[name='checkbox']").each(function(){this.checked=true;});
$("#btn1").attr("value","反选");
}
else
{
$("input[name='checkbox']").each(function(){this.checked=false;});
$("#btn1").attr("value","全选");
}
});
$("#btn1").click(function(){
$("[name='checkbox']").attr("checked",'true');
})
$("#cancel").click(function(){
$("[name='checkbox']").removeAttr("checked");
})
$("#jishu").click(function(){
$("[name='checkbox']:even").attr("checked",'true');
})
$("#fanxuan").click(function(){
$("[name='checkbox']").each(function(){
if($(this).attr("checked"))
{
$(this).removeAttr("checked");
}
else
{
$(this).attr("checked",'true');
}
})
})
$("#get").click(function(){
varstr="";
$("[name='checkbox'][checked]").each(function(){
str+=$(this).val()+"/r/n";
})
alert(str);
})
})
</script>
</head>
<body>
<formname="form1"method="post"action="">
<inputtype="checkbox"id="all"name="all">
<inputtype="button"id="btn1"value="全选">
<inputtype="button"id="cancel"value="取消全选">
<inputtype="button"id="jishu"value="选中所有奇数">
<inputtype="button"id="fanxuan"value="反选">
<inputtype="button"id="get"value="获得选中的所有值">
<br>
<inputtype="checkbox"name="checkbox"value="毛票票一">
毛票票一
<inputtype="checkbox"name="checkbox"value="毛票票二">
毛票票二
<inputtype="checkbox"name="checkbox"value="毛票票三">
毛票票三
<inputtype="checkbox"name="checkbox"value="毛票票四">
毛票票四
<inputtype="checkbox"name="checkbox"value="毛票票五">
毛票票五
<inputtype="checkbox"name="checkbox"value="毛票票六">
毛票票六
<inputtype="checkbox"name="checkbox"value="毛票票七">
毛票票七
<inputtype="checkbox"name="checkbox"value="毛票票八">
毛票票八
</form>
</body>
</html>
以上就是关于checkbox复选框的全部内容，希望对大家的学习有所帮助。