css中的單選怎麼做

daqianmen發表於2021-09-11
CSS

在css中，可以使用radio物件製作單選，只需要在input元素中設定“”樣式即可。單選按鈕是表示一組互斥選項按鈕中的一個；當一個按鈕被選中，之前選中的按鈕就變為非選中的。

css中的單選怎麼做

本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

一、單選按鈕控制元件語法

<input name="Fruit" type="radio" value="" />

使用html input標籤，name為自定義，type型別為“radio”的表單，

Radio 物件代表 HTML 表單中的單選按鈕。

在 HTML 表單中 <input type="radio"> 每出現一次，一個 Radio 物件就會被建立。

單選按鈕是表示一組互斥選項按鈕中的一個。當一個按鈕被選中，之前選中的按鈕就變為非選中的。

當單選按鈕被選中或不選中時，該按鈕就會觸發 onclick 事件控制程式碼。

您可透過遍歷表單的 elements[] 陣列來訪問 Radio 物件，或者透過使用 document.getElementById()。

二、radio單選按鈕語法案例

html程式碼

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="" method="get">
      您最喜歡水果？<br /><br />
      <label><input name="Fruit" type="radio" value="" />蘋果 </label>
      <label><input name="Fruit" type="radio" value="" />桃子 </label>
      <label><input name="Fruit" type="radio" value="" />香蕉 </label>
      <label><input name="Fruit" type="radio" value="" />梨 </label>
      <label><input name="Fruit" type="radio" value="" />其它 </label>
    </form>
  </body>
</html>

截圖

GIF.gif

推薦學習：

以上就是css中的單選怎麼做的詳細內容，更多請關注php中文網其它相關文章！

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/1727/viewspace-2827740/，如需轉載，請註明出處，否則將追究法律責任。

相關文章