整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
頁編程之單選復(fù)選。
同學(xué)們好，這里是免費少兒編程知識分享。每天一行代碼誰都能學(xué)會！今天分享的知識是在網(wǎng)頁中插入單選框復(fù)選框和定義標(biāo)注。顧名思義，單選框就是在一堆選項中單獨選擇一個，而復(fù)選框則是選擇多個選項。
定義標(biāo)注是一種常見的表單控件，觸發(fā)表單對應(yīng)的控件功能，讓用戶在使用表單時能夠有更好的體驗，用到的是Input標(biāo)簽的type值radio Checkbox和label標(biāo)簽。
先來看看今天實例的運行效果。網(wǎng)頁上一共有三段，第一段和第二段都是單選框，讓用戶選擇自己的職業(yè)，它們的區(qū)別在第一段只有點擊單選框空鍵才能夠使單選框處于選中的狀態(tài)，而第二段只要點擊某一項對應(yīng)的文字即可讓單選框處于選中的狀態(tài)。
還順便演示了在一個網(wǎng)頁中插入多個單選框，而不互相干擾，一般來說單選框都是必選，且只能夠選擇中一個。所以第一段還演示了如何在頁面加載時就選中單選框的一項。第三個是復(fù)選框可以同時選中多個值，也可以一個值都不選，最后一個是輸出選擇的按鈕，點擊之后就會彈出對話框，使用JS取得選中的值并且顯示出來。就像這樣，效果各位同學(xué)都已經(jīng)看到了。
現(xiàn)在我們來看看實現(xiàn)的代碼。單選框用到的是input標(biāo)簽的type屬性值radio，它的常用屬性有Checked的，使用此項則默認(rèn)為選中狀態(tài)。
·vivo 有定義每一項的返回值波紋定向了選選項組的名稱，所有l(wèi)am相同的選項則為同一組選項，而要在頁面中插入不同的選項組，只需要將ame設(shè)置不同即可。
id 為唯一標(biāo)識，常用來和labei標(biāo)簽的For屬性搭配使用Disabled設(shè)置某一選項是否會被禁用。復(fù)選框用到的是input標(biāo)簽的type屬性的Checkbox，它的屬性和radio是完全一樣的，沒有任何的差別，也沒有必要在這里再浪費一次時間。
剛才已經(jīng)演示過，如果說讓用戶去點擊單選框或者復(fù)選框控件才能夠更改狀態(tài)是比較麻煩的事情，而點擊文字就能更改選項。
操作就會簡單很多，用到的也就是label標(biāo)簽，label標(biāo)簽為input元素定義標(biāo)注也可以叫標(biāo)記。label標(biāo)簽不會向用戶展示任何特殊的效果，也就說它和普通文字是一模一樣的。不過它為鼠標(biāo)用戶改進了可用性。
如果在label元素內(nèi)點擊文本就會觸發(fā)該控件，也就是說當(dāng)用戶選擇該標(biāo)簽時瀏覽器會自動將焦點轉(zhuǎn)移到和標(biāo)簽相關(guān)的表單控件上，用到的是被關(guān)聯(lián)控件的ID屬性和label的for屬性。就像這樣在for屬性里面填上單選框的ID值，點擊這個label的時候ID為F2-2(口誤)的單選框就得到了焦點改變了值。JS現(xiàn)在就不講了，看看就得了免得你們大。
今天的分享就到這里，希望各位同學(xué)下去能夠照著寫3遍，做到不看視頻也能夠?qū)懗鰜硭械陌咐跋嚓P(guān)文檔均可以向我獲取。下期見。網(wǎng)頁編程·服務(wù)端編程·數(shù)據(jù)庫·算法，點贊·關(guān)注。想學(xué)編程點關(guān)注吧。
ss實現(xiàn)簡單實用的復(fù)選框，常用于自定義復(fù)選框的頁面當(dāng)中！實現(xiàn)效果如下：
代碼如下：
html布局：
css樣式:
單CSS實現(xiàn)的復(fù)選框選擇效果，一般默認(rèn)樣式的復(fù)選框選擇只是有個黑色邊框然后選中后出現(xiàn)打鉤，今天講解下用css實現(xiàn)的不一樣的復(fù)選框選擇效果！如下：
選中后黑點由外到內(nèi)縮放
實現(xiàn)代碼
html：
css:
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
