單選按鈕美化效果程式碼
在網頁中,單選按鈕是最為常用的元素之一,但是它長的確實太一般了,並且改造潛力有限,所以必須使用一些其他方法來對其進行一下美化,下面就是一段這樣的例項程式碼,下面對此做一下簡單介紹。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .RadioClass{display:none;} .RadioLabelClass:hover{text-decoration:underline;} .LabelSelected{background:url("mytest/jQuery/Check.png") no-repeat;} .RadioLabelClass { background:url("mytest/jQuery/RUnCheck.png") no-repeat; padding-left:30px; padding-top:3px; margin:5px; height:28px; width:80px; display:block; float:left; } .RadioSelected{background:url("mytest/jQuery/RCheck.png") no-repeat;} </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".RadioClass").change(function(){ if($(this).is(":checked")){ $(".RadioSelected:not(:checked)").removeClass("RadioSelected"); $(this).next("label").addClass("RadioSelected"); } }) }) </script> </head> <body> <div> <input id="Radio1" type="radio" class="RadioClass" name="group1" > <label id="Label1" for="Radio1" class="RadioLabelClass">螞蟻部落一</label> <input id="Radio2" type="radio" class="RadioClass" name="group1"/> <label id="Label2" for="Radio2" class="RadioLabelClass">螞蟻部落二</label> <input id="Radio3" type="radio" class="RadioClass" name="group1"/> <label id="Label3" for="Radio3" class="RadioLabelClass">螞蟻部落三</label> </div> </body> </html>
以上程式碼實現了我麼的要求,實現比較不錯的美化效果,當然可以根據自己的需要進行改造。
程式碼非常的簡單,這裡就不多介紹了,實現原理和checkbox核取方塊美化效果程式碼一章節類似。
相關文章
- radio單選按鈕美化效果
- CSS3 radio單選按鈕美化效果CSSS3
- css3單選框、核取方塊和開關按鈕美化效果程式碼例項CSSS3
- css3實現button按鈕美化效果程式碼例項CSSS3
- CSS3 美化radio單選按鈕CSSS3
- jQuery操作單選按鈕程式碼示例jQuery
- 單選多選按鈕
- js點選按鈕數字加1效果程式碼例項JS
- 表單提示美化效果程式碼例項
- 判斷核取方塊和單選按鈕程式碼
- 窗體(文字框,按鈕,單選按鈕,標籤)
- js遍歷raido單選按鈕並獲取選中值程式碼JSAI
- css自定義單選按鈕的樣式程式碼例項CSS
- JavaScript點選按鈕彈出層效果JavaScript
- html如何設定radio單選按鈕預設選中效果HTML
- Java選擇框和單選按鈕Java
- js表單提交後提交按鈕不可點選程式碼例項JS
- 按鈕倒數計時可用效果例項程式碼
- JavaScript點選按鈕數字加1效果JavaScript
- 點選按鈕實現數字增加效果
- js獲取選中radio單選按鈕的值程式碼例項JS
- Tkinter (11) 選單按鈕部件 Menubutton
- 配置選單按鈕掃一掃
- JQuery統一複寫美化專案中所有radio單選按鈕樣式jQuery
- select下拉選單美化程式碼例項
- js單選按鈕radio選中值JS
- 防止表單提交按鈕重複點選現象程式碼例項
- 滑鼠懸浮按鈕背景變色效果程式碼例項
- 點選提交按鈕實現彈出警告框表單驗證效果
- 點選按鈕實現狀態切換效果
- 點選按鈕實現圖片切換效果
- CSS-實戰-上傳按鈕美化CSS
- radio 單選按鈕 選中多個
- HTML input radio 單選按鈕HTML
- 單選按鈕和核取方塊
- HTML input radio單選按鈕HTML
- Chrome 22亮相 全新選單按鈕曝光Chrome
- 獲取選中表單按鈕的值