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