首頁 > 網際網路

如何讓input中點選圖片選中效果

2019-12-12 00:26:30

在html網頁開發中,我們經常使用到input radio單選控制元件,如果我們為每個單選控制元件配上一個圖片,如何實現點選圖片時,讓單選控制元件選中?使用js來控制就行了,下面我們來看一下。

1

為了方便操作,我們使用jquery外掛庫來操作dom,所以先引入對應的指令碼檔案。


2

在html裡新增radio的input控制元件,並在其後面新增圖片控制元件,每一項放在一個樣式為radio_item的div裡。


3

然後通過樣式選擇器,為每一個img圖片控制元件新增點選事件。


4

在點選事件裡,呼叫parent方法來得到img圖片的父容器,即它所在的div容器。


5

接著通過find方法,來找到div裡的input控制元件,即單選控制元件。


6

單選控制元件找到後,就可以呼叫它的prop方法來設定它的checked屬性了,設定為ture值則是選中狀態。


7

開啟頁面,可以看到每一個單選控制元件後,都有一個圖片,我們可以直接點選圖片來選擇。


8

點選後,它前面的單選控制元件就會自動選中了。



IT145.com E-mail:sddin#qq.com