本文實例介紹了javascript實現(xiàn)checkbox復(fù)選框?qū)嵗a以及對checkbox復(fù)選框進(jìn)行美化操作，分享給大家供大家參考，具體內(nèi)容如下
1、checkbox復(fù)選框進(jìn)行美化操作
復(fù)選框默認(rèn)外表的美觀度差強人意，能夠滿足美觀度要求不高的頁面，但是如果對于頁面要求較為精致，那可能就過于勉強了，下面就一段對復(fù)選框進(jìn)行美化的代碼實例，希望能夠給大家?guī)硪欢ǖ膸椭?br />代碼實例如下：
<!DOCTYPE html><html><head><meta charset=" utf-8"><title>checkbox復(fù)選框</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">武林網(wǎng)一</label> <input id="CheckBox2" type="checkbox" class="CheckBoxClass"/> <label id="Label2" for="CheckBox2" class="CheckBoxLabelClass">武林網(wǎng)二</label></div></body></html>2、checkbox復(fù)選框全選和取消全選實例代碼
關(guān)于復(fù)選框的全選和不全選是非常常見的操作，本章節(jié)分享一段代碼實例，能夠?qū)崿F(xiàn)多種選中和取消選中功能。
代碼實例如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><title>武林網(wǎng)</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="選中所有奇數(shù)"> <input type="button" id="fanxuan" value="反選"> <input type="button" id="get" value="獲得選中的所有值"> <br> <input type="checkbox" name="checkbox" value="武林網(wǎng)一"> 武林網(wǎng)一 <input type="checkbox" name="checkbox" value="武林網(wǎng)二"> 武林網(wǎng)二 <input type="checkbox" name="checkbox" value="武林網(wǎng)三"> 武林網(wǎng)三 <input type="checkbox" name="checkbox" value="武林網(wǎng)四"> 武林網(wǎng)四 <input type="checkbox" name="checkbox" value="武林網(wǎng)五"> 武林網(wǎng)五 <input type="checkbox" name="checkbox" value="武林網(wǎng)六"> 武林網(wǎng)六 <input type="checkbox" name="checkbox" value="武林網(wǎng)七"> 武林網(wǎng)七 <input type="checkbox" name="checkbox" value="武林網(wǎng)八"> 武林網(wǎng)八 </form></body></html> 以上就是關(guān)于checkbox復(fù)選框的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
新聞熱點
疑難解答
