JS選擇金額後填入輸入框內
工具/原料
dreamweaver 8
jquery-1.8.0.min.js
方法/步驟
1.我們在一些繳費網站經常見到如下的效果，你既可以自己輸入金額，也可以自己快速選擇金額，當你選擇完畢金額之後，輸入框內，填入對應的金額
2.這個是使用Jquery代碼來實現的，靜態頁面如下圖
3.靜態頁面的代碼如圖
4.接下來我們就一步一步實現上邊的效果
首先，需要選中快速選擇的值，並把這個值填寫到輸入框內
看如下代碼：
5.解釋一下
$(document).ready(function(){ 。。。。。｝ 這段代碼的意思是頁面加載完畢就執行大括號中的代碼
$("table a").click(function(){。。。。。｝這段代碼的意思是當table 中的a 被點擊的時候執行大括號中的代碼
var val = $(this).text(); 這段代碼是獲取當前點擊a標籤中間的text值即 200元
var val2 = val.substring(0,val.indexOf("元")); 這段代碼是把“元”去掉，只保留200
$("#money").val(val2); 這段代碼是把200賦值給input 即把200填寫入輸入框內
運行下看下效果，現在你點擊對應的金額，輸入框內就顯示對應的金額了！
6.但現在還有個問題，當你選擇的時候，被點擊的金額沒有紅框顯示，紅框仍然展示在200元上，我們想實現點擊某一個金額，就讓那個金額一個選中狀態
7.看如下代碼：
8.解釋
$("table a").removeClass("on"); 把table下的a標籤全部刪除on樣式，即所有的a都沒有紅框了
$(this).attr("class","on"); 把當前選中的a給加上紅框
原理就是，把所有的選項都刪除樣式，然後給當前選中的加上紅框樣式
現在運行下，看下效果吧
注意事項
jquery-1.8.0.min.js 可以自己從網上下載，可以私信我