零基礎教你學前端-30、單選和多選

節課，我們實現表單中的單選和多選功能。

對于所有人而言，每天都會面臨各種各樣的選擇。例如：1000W和北大錄取通知書我該選哪一個？我是去考研還是去工作？地上有一張50元和一張100元，我要撿哪一張？

在HTML中如何實現單選和多選呢?

我們可以通過在 form 標簽里，嵌入 input 標簽，通過設置 input 標簽的 type 屬性值來實現單選和多選。

單選，type 的取值為 radio，radio 是收音機的意思，因為我們收聽節目只能調到一個波段，因此用它來表示單選按鈕，就是讓用戶在有限的選擇中只選擇一個。

多選，type 取值為 checkbox，譯為復選框，也叫多選框，讓用戶在有限的選擇中選擇更多的選項。

我們來實現一個單選和多選的功能。

打開編輯器，新建一個 radio_checkbox.html 文件，自動補全基礎代碼，在body標簽內部編寫一個 form 表單標簽，在 form 標簽里面添加文本 選擇性別： (冒號讀出來) ，緊接著添加一個 input 標簽，設置標簽的 type 屬性值為 radio，后面添加文本 "男"，回車換行。

使用同樣的方法，再添加一個 input 標簽，設置標簽的 type 屬性值為 radio，后面添加文本 "女"。保存。

用瀏覽器打開頁面，一組性別選擇的單選框顯示在頁面中。使用鼠標點擊單選控件，這時你會發現單選框出現了問題，性別居然能選擇多個?

在這里需要提醒大家的是：

單選框控件必須成組使用才有意義，并且每組至少需要兩個單選框。

而“組”是通過 name 屬性來建立的，凡是 name 值相同的就是一組。

同組的單選框，只有一個會處在選中狀態，其他的會自動呈現為未選中狀態。

因此，如果沒有給單選框設置 name 屬性，默認每個單選框自成一組，一旦選中這個單選框，要想通過點擊來解除選中狀態就做不到了。

回到編輯器，為兩個 input 單選框定義 name 屬性，值設置為 gender。保存。

回到瀏覽器，刷新。當我們再次點擊性別選框的時候，單選的效果實現了。

返回編輯器，在單選框結尾處添加一個 br 標簽。回車換行。

輸入文本：前端基礎包括：在文本后輸入 input 中括號 type 等于 checkbox，input[type=checkbox] 按下 tab 鍵，創建三個多選框控件。

分別在每一個 input 復選框后面添加文本 HTML、CSS、JavaScript。保存。

回到瀏覽器，刷新，包含三個選項的復選框做好了。鼠標點擊復選框，出現了對鉤，表示已經選中，再次點擊選中的復選框，取消選擇。

我們再刷新一下頁面，發現單選框和多選框在默認情況下，都沒有選中。能不能在打開頁面的時候，性別的男和前端基礎的HTML，默認選中呢？

單選框和多選框默認選中效果，都可以通過定義 checked 屬性來實現，它的值只要不為空，任何字符都可以，通常我們會使用 checked 字符串作為它的值。另外，選中和取消選中只有兩個狀態，所以也可以不用定義值，只定義一個屬性名就可以了。

返回編輯器，給第一個單選控件添加 checked 屬性，再給第一個多選控件添加 checked 屬性。保存。

回到瀏覽器，刷新。性別和HTML默認選中了。點擊其他控件，單選多選的功能依然有效。

單選框和多選選框我們就講完了，快自己實現一下吧。

文章配套視頻鏈接點我「鏈接」

選按鈕

單選按鈕主要是讓網頁瀏覽者在一組選項里只能選擇一個。代碼格式如下。

其中type="radio"定義單選按鈕；name屬性定義單選按鈕的名稱，單選按鈕都是以組為單位使用的，在同一組中的單選項都必須用同一個名稱；value屬性定義單選按鈕的值，在同一組中域值必須是不同。

（1）編寫代碼如下圖所示，在<body>標簽中加入以下代碼。

（2）在瀏覽器中打開文件，預覽效果圖如下所示，即可看到5個單選按鈕，用戶只能同時選擇其中一個。

復選框

復選框主要是讓網頁瀏覽者在一組選項里可以同時選擇多個選項。每個復選框都是一個獨立的元素，都必須有唯一的一個名稱。代碼格式如下。

其中type="checkbox"定義復選框；name屬性定義復選框的名稱，在同一組中的復選框都必須用同一個名稱；value屬性定義復選框的值。

（1）編寫代碼如下圖所示，在<body>標簽中加入以下代碼。

（2）在瀏覽器中打開文件，預覽效果圖如下所示，即可看到5個復選框，其中【人生大事】和【廣告專區】復選框被選中。

習借助網絡技術將舊的單選按鈕轉換為具有現代外觀的單選卡。

單選按鈕是表單的關鍵元素之一。當以正確的方式使用時，這些是驚人的，因為它們簡化了從給定列表中選擇一個選項的任務。但是默認的單選按鈕看起來不太好。我們需要對其進行改造，使其在用戶看來令人驚嘆，這將顯著改善網站的用戶體驗。

在本文中，我將逐步介紹如何在 Web 應用程序中實現自定義單選卡。在這里，我們將把舊的單選按鈕變成漂亮的 CSS 卡片。每張卡片都有一個檢查（勾號）圖標，默認情況下它是隱藏的，并且僅在用戶單擊卡片時才會出現。

通過 3 個簡單的步驟構建令人驚嘆的無線電卡

使用 HTML 創建單選卡的布局。
使用 JavaScript 使無線電卡功能化。
使用 CSS 設計無線電卡。

第 1 步：使用 HTML 創建單選卡的布局

讓我們為我們的單選卡設置一個基本的 HTML 布局。它將包括一個容納卡片的容器。在其中，我們將添加三張卡片，每張卡片都有一個勾號（勾號）圖標、一個卡片圖標（圖像）、一個卡片標簽（標題）和一個卡片標簽說明（附加內容）。每個無線電卡都有一個名為 radio-card 的通用類，為了使其正常工作，我們需要為每個無線電卡添加另一個獨特的類，例如 radio-card-1、radio-card-2、radio-card-3 和很快。這些卡片將有一個 onclick 屬性，該屬性將調用名為 selectRadioCard() 的函數。在參數中傳遞卡號，如 1、2 或 3。我們將在下一步編寫使卡片正常工作的邏輯。

將以下代碼片段添加到您要實現自定義單選卡的部分。

<div>
    <h1>Create Stunning Radio Cards Using HTML, CSS, and JavaScript</h1>
    <div id="radio-cards-container">
        <!-- Radio Card 1 -->
        <div class="radio-card radio-card-1" onclick="selectRadioCard('1')">
            <!-- Radio Card Check (tick) icon. By default, its hidden. Will be displayed when card gets clicked. -->
            <div class="radio-card-check">
                <i class="fa-solid fa-check-circle"></i>
            </div>
            <!-- Section to display the icon, label, and some additional text -->
            <div class="text-center">
                <div class="radio-card-icon">
                    <img src="./images/icon-react.png" alt="React" />
                </div>
                <div class="radio-card-label">
                    React
                </div>
                <div class="radio-card-label-description">
                    Build an application using React.
                </div>
            </div>
        </div>
        <!-- Radio Card 2 -->
        <div class="radio-card radio-card-2" onclick="selectRadioCard('2')">
            <!-- Radio Card Check (tick) icon. By default, its hidden. Will be displayed when card gets clicked. -->
            <div class="radio-card-check">
                <i class="fa-solid fa-check-circle"></i>
            </div>
            <!-- Section to display the icon, label, and some additional text -->
            <div class="text-center">
                <div class="radio-card-icon">
                    <img src="./images/icon-angular.png" alt="Angular" />
                </div>
                <div class="radio-card-label">
                    Angular
                </div>
                <div class="radio-card-label-description">
                    Build an application using Angular.
                </div>
            </div>
        </div>
        <!-- Radio Card 3 -->
        <div class="radio-card radio-card-3" onclick="selectRadioCard('3')">
            <!-- Radio Card Check (tick) icon. By default, its hidden. Will be displayed when card gets clicked. -->
            <div class="radio-card-check">
                <i class="fa-solid fa-check-circle"></i>
            </div>
            <!-- Section to display the icon, label, and some additional text -->
            <div class="text-center">
                <div class="radio-card-icon">
                    <img src="./images/icon-vue.png" alt="Vue" />
                </div>
                <div class="radio-card-label">
                    Vue
                </div>
                <div class="radio-card-label-description">
                    Build an application using Vue.
                </div>
            </div>
        </div>
    </div>
</div>

第 2 步：使用 JavaScript 使無線電卡功能化

現在，我們需要實現當用戶觸發卡片上的點擊事件時使單選卡片起作用的邏輯。添加一個名為 selectRadioCard 的函數，它將接受一個名為 cardNo 的參數。它將首先找到所有的無線電卡，然后遍歷它們中的每一個，并刪除選定的類。之后，它將找到具有指定卡號的元素，如 radio-card-1、radio-card-2 或 radio-card-3，并將選擇的類添加到其中。

在頁面上的腳本元素中添加以下代碼片段。或者，您可以創建一個外部 JavaScript 文件并使用它。

const selectRadioCard = (cardNo) => {
    /**
     * Loop through all radio cards, and remove the class "selected" from those elements.
     */
    const allRadioCards = document.querySelectorAll(".radio-card");
    allRadioCards.forEach((element, index) => {
        element.classList.remove(["selected"]);
    });
    /**
     * Add the class "selected" to the card which user has clicked on.
     */
    const selectedCard = document.querySelector(".radio-card-" + cardNo);
    selectedCard.classList.add(["selected"]);
};

第 3 步：使用 CSS 設計無線電卡

由于我們已經完成了自定義單選卡的實現，我們需要添加一些 CSS 片段來設計我們的 HTML 內容的布局。

將以下代碼片段添加到頁面上的樣式元素。或者，您可以創建一個外部 CSS 文件并使用它。

#radio-cards-container {
    margin-top: 5rem;
    width: 75vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.radio-card {
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    width: 300px;
    margin-right: 2rem;
    margin-bottom: 2rem;
    padding: 3rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.radio-card:hover {
    border: 2px solid #016787;
    cursor: pointer;
}

.radio-card-check {
    display: none;
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
}

.radio-card-check i {
    font-size: 1.6rem;
    color: #016787;
}

.text-center {
    text-align: center;
}

.radio-card-icon img {
    width: 80px;
}

.radio-card-label {
    margin-top: 1rem;
    font-weight: 600;
    font-size: 1.2rem;
}

.radio-card-label-description {
    margin-top: 0.5rem;
    color: rgba(0, 0, 0, 0.7);
}

.radio-card.selected {
    border: 2px solid #016787;
}

.radio-card.selected .radio-card-check {
    display: inline-flex;
}

結果

您已完成學習如何使用純 HTML、CSS 和 JavaScript 創建令人驚嘆的單選卡。

關注七爪網，獲取更多APP/小程序/網站源碼資源！

在線咨詢

上一篇：Edge/Chrome 83新表單控件啟用黑色邊框給用戶和開發者帶來困擾
下一篇：前端：JS延長加載的方式有哪些？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

零基礎教你學前端-30、單選和多選

選按鈕

復選框

您的項目需求