本文实例介绍了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复选框的全部内容,希望对大家的学习有所帮助。