javascript实现checkbox复选框实例代码

本文实例介绍了javascript实现checkbox复选框实例代码以及对checkbox复选框进行美化操作，分享给大家供大家参考，具体内容如下
1、checkbox复选框进行美化操作
复选框默认外表的美观度差强人意，能够满足美观度要求不高的页面，但是如果对于页面要求较为精致，那可能就过于勉强了，下面就一段对复选框进行美化的代码实例，希望能够给大家带来一定的帮助。
代码实例如下：

<！DOCTYPE html><html><head><meta charset=" utf-8"><title>checkbox复选框</title><style type="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><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="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> <input id="CheckBox1" type="checkbox" class="CheckBoxClass"/> <label id="Label1" for="CheckBox1" class="CheckBoxLabelClass">脚本之家一</label> <input id="CheckBox2" type="checkbox" class="CheckBoxClass"/> <label id="Label2" for="CheckBox2" class="CheckBoxLabelClass">脚本之家二</label></div></body></html>

2、checkbox复选框全选和取消全选实例代码
关于复选框的全选和不全选是非常常见的操作，本章节分享一段代码实例，能够实现多种选中和取消选中功能。
代码实例如下:

<！DOCTYPE html><html><head><meta charset=" utf-8"><title>脚本之家</title><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="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（）{var str="";$（"[name="checkbox"][checked]"）.each（function（）{ str+=$（this）.val（）+"/r/n";}）alert（str）; }）}） </script> </head> <body> <form name="form1" method="post" action=""><input type="checkbox" id="all" name="all"><input type="button" id="btn1" value="全选"><input type="button" id="cancel" value="取消全选"><input type="button" id="jishu" value="选中所有奇数"><input type="button" id="fanxuan" value="反选"><input type="button" id="get" value="获得选中的所有值"><br><input type="checkbox" name="checkbox" value="脚本之家一">脚本之家一<input type="checkbox" name="checkbox" value="脚本之家二">脚本之家二<input type="checkbox" name="checkbox" value="脚本之家三">脚本之家三<input type="checkbox" name="checkbox" value="脚本之家四">脚本之家四<input type="checkbox" name="checkbox" value="脚本之家五">脚本之家五<input type="checkbox" name="checkbox" value="脚本之家六">脚本之家六<input type="checkbox" name="checkbox" value="脚本之家七">脚本之家七<input type="checkbox" name="checkbox" value="脚本之家八">脚本之家八 </form></body></html>

以上就是关于checkbox复选框的全部内容，希望对大家的学习有所帮助。