html單選按鈕默認選中怎么做？input標(biāo)簽的單選按鈕實例

篇文章主要的向大家介紹了關(guān)于html input標(biāo)簽的單選按鈕的使用方法，還有關(guān)于HTML input標(biāo)簽的單選默認按鈕的做法。接下來我們一起來看看這篇文章吧

首先我們介紹的是在html input標(biāo)簽中的單選按鈕的做法：

<input> 標(biāo)簽用于搜集用戶信息。根據(jù)不同的type屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復(fù)選框、掩碼后的文本控件、單選按鈕、按鈕等等。

話不多說，上代碼實例：

> <form action="form_action.asp" method="get">
> 
> <input type="radio" name="radio" value="1">單選1
> 
> <input type="radio" name="radio" value="2">單選2
> 
> <input type="radio" name="radio" value="3">單選3
> 
> <input type="radio" name="radio" value="4">單選4
> 
> </form>

這個的效果很容易看到，我們還是先看看瀏覽器中的顯示效果吧：

這個效果一眼就能看到，很簡單的一個代碼

還有種是很多網(wǎng)站上都是經(jīng)常見到的，比如：單選性別，這個基本上都是用這種單選框去制作的。代碼如下：

HTML中的單選按鈕實現(xiàn)男女性別選擇，不讓男女同是都能都能選擇，實現(xiàn)方法：在按鈕的屬性里寫一個name屬性，并且把name的值設(shè)置成相同的

> <input id="man" type="radio" checked="checked" name="1" />男
> 
> <input id="woman" type="radio" name="1"/>女

這個就不給圖了，比上面那個還簡單，就兩個單選框，我們經(jīng)常遇到的這個。

現(xiàn)在來說說HTML單選框按鈕怎么默認選中：

首先我們先把第一個實例拿出來繼續(xù)說，我們只需要在其中加一個屬性，如下：

> <form action="form_action.asp" method="get">
> 
> <input type="radio" name="radio" value="1">單選1
> 
> <input type="radio" name="radio" value="2" checked>單選2
> 
> <input type="radio" name="radio" value="3">單選3
> 
> <input type="radio" name="radio" value="4">單選4
> 
> </form>

效果依舊很明顯，看效果圖：

這上面我沒做任何的點擊，自己出現(xiàn)在那上面的，刷新過后還能看到在單選2上面。

我們就可以看到，這樣就把單選框給默認選中了，大家可以自己試試，多敲敲代碼。

好了，以上就是這篇關(guān)于html input標(biāo)簽做單選按鈕的文章了，有問題的可以在下方提問。

以上就是html單選按鈕默認選中怎么做？input標(biāo)簽的單選按鈕用法實例的詳細內(nèi)容，更多請關(guān)注我?。?！

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年我花了一個月整理了一份最適合2020年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費獲取。

習(xí)借助網(wǎng)絡(luò)技術(shù)將舊的單選按鈕轉(zhuǎn)換為具有現(xiàn)代外觀的單選卡。

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

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

通過 3 個簡單的步驟構(gòu)建令人驚嘆的無線電卡

使用 HTML 創(chuàng)建單選卡的布局。
使用 JavaScript 使無線電卡功能化。
使用 CSS 設(shè)計無線電卡。

第 1 步：使用 HTML 創(chuàng)建單選卡的布局

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

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

<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 使無線電卡功能化

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

在頁面上的腳本元素中添加以下代碼片段。或者，您可以創(chuàng)建一個外部 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 設(shè)計無線電卡

由于我們已經(jīng)完成了自定義單選卡的實現(xiàn)，我們需要添加一些 CSS 片段來設(shè)計我們的 HTML 內(nèi)容的布局。

將以下代碼片段添加到頁面上的樣式元素。或者，您可以創(chuàng)建一個外部 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;
}

結(jié)果

您已完成學(xué)習(xí)如何使用純 HTML、CSS 和 JavaScript 創(chuàng)建令人驚嘆的單選卡。

關(guān)注七爪網(wǎng)，獲取更多APP/小程序/網(wǎng)站源碼資源！

avaScript復(fù)選框的分組單選實現(xiàn)

近期在制作MVC實例教學(xué)課件中，選擇使用了在線考試作為題材進行頁面的設(shè)計，在線考試主要提供單項選擇題，用戶點擊選擇項之后提交服務(wù)器端。頁面布局時使用了復(fù)選按鈕進行了選項的設(shè)置。本文主要討論分組復(fù)選框模擬實現(xiàn)單選功能。

實現(xiàn)效果

本例設(shè)計使用復(fù)選按鈕模擬單選按鈕主要原因是出于頁面的美觀?？荚図撁嫘枰獙?fù)選按鈕按照題目進行分組，并且針對同一題目只允許選擇一個，即模擬實現(xiàn)單選功能。設(shè)計頁面效果如下圖：

考試頁面設(shè)計效果

考試頁面設(shè)計效果如上圖，按照題目編號分組后實現(xiàn)單選功能。操作動畫演示如下圖：

動態(tài)實現(xiàn)效果展示

實現(xiàn)基本思路

使用復(fù)選框模擬分組單選按鈕設(shè)計及實現(xiàn)效果描述如上所示，其實現(xiàn)主要需要借助JavaScript前端交互腳本技術(shù)。具體實現(xiàn)思路描述如下：

1、獲取被點擊復(fù)選框編號

獲取復(fù)選框被點擊的編號id主要目的是需要通過編號判斷當(dāng)前復(fù)選框?qū)儆谀囊粋€分組。進而確定第幾道題的第幾個選項被點擊。

2、獲取被點擊復(fù)選框同組復(fù)選框編號

在獲取當(dāng)前點擊復(fù)選框之后可以通過取余數(shù)運算獲取余數(shù)。設(shè)計每個題目必須具有四個選項。通過%4進行取余數(shù)。根據(jù)余數(shù)獲取本組其他復(fù)選框的ID值。如余數(shù)為0，表示當(dāng)前被點擊的是本組最后一個復(fù)選框。

3、設(shè)置本組其他復(fù)選框為未選中狀態(tài)

在獲取本組其他復(fù)選框之后，可以進一步通過JavaScript文檔對象模型的getElementById()方法獲取每一個復(fù)選框，并設(shè)置其checked屬性值為false，表示未選中。

編碼實現(xiàn)

在明確基本實現(xiàn)思路之后可以進行前端HTML頁面的設(shè)計及JavaScript的編碼操作實現(xiàn)等。按照設(shè)計思路，需要將試題中出現(xiàn)的所有復(fù)選框都設(shè)置ID屬性。且ID屬性需要按照從 1遞增進行設(shè)置。設(shè)計Name屬性用于實現(xiàn)分組，即同一題目四個選項對應(yīng)的復(fù)選框Name相同。前端HTML代碼描述如下：

input標(biāo)記及屬性設(shè)置

input標(biāo)記及屬性設(shè)置描述如上圖所示，設(shè)置id用于標(biāo)志每一個復(fù)選框，設(shè)計name標(biāo)志分組，設(shè)計onclick事件用于接受模擬單選操作。

本例設(shè)計函數(shù)setValue()用于實現(xiàn)處理模擬單選操作，該函數(shù)傳遞標(biāo)志自身的this。在接收到this之后可以通過它獲取對應(yīng)的id值，并進行進一步處理?；静僮鞑襟E如下：

1、var eid=this.id;

獲取當(dāng)前點擊復(fù)選框?qū)?yīng)的id值并存儲變量eid中。

2、var i=eid%4

取余數(shù)判斷當(dāng)前復(fù)選框在所屬組中的位次。

3、var el=new Array(3)

在線咨詢

上一篇：前端程序員入門html的4大方法，這兩本神書真心經(jīng)典！
下一篇：html基礎(chǔ)必備-列表標(biāo)記，前端小白一看就會

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商