html单选按钮默认选中怎么做？input标签的单选按钮实例

篇文章主要的向大家介绍了关于html input标签的单选按钮的使用方法，还有关于HTML input标签的单选默认按钮的做法。接下来我们一起来看看这篇文章吧

首先我们介绍的是在html input标签中的单选按钮的做法：

<input> 标签用于搜集用户信息。根据不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

话不多说，上代码实例：

> <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>

这个的效果很容易看到，我们还是先看看浏览器中的显示效果吧：

这个效果一眼就能看到，很简单的一个代码

还有种是很多网站上都是经常见到的，比如：单选性别，这个基本上都是用这种单选框去制作的。代码如下：

HTML中的单选按钮实现男女性别选择，不让男女同是都能都能选择，实现方法：在按钮的属性里写一个name属性，并且把name的值设置成相同的

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

这个就不给图了，比上面那个还简单，就两个单选框，我们经常遇到的这个。

现在来说说HTML单选框按钮怎么默认选中：

首先我们先把第一个实例拿出来继续说，我们只需要在其中加一个属性，如下：

> <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>

效果依旧很明显，看效果图：

这上面我没做任何的点击，自己出现在那上面的，刷新过后还能看到在单选2上面。

我们就可以看到，这样就把单选框给默认选中了，大家可以自己试试，多敲敲代码。

好了，以上就是这篇关于html input标签做单选按钮的文章了，有问题的可以在下方提问。

以上就是html单选按钮默认选中怎么做？input标签的单选按钮用法实例的详细内容，更多请关注我！！！

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年我花了一个月整理了一份最适合2020年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

习借助网络技术将旧的单选按钮转换为具有现代外观的单选卡。

单选按钮是表单的关键元素之一。当以正确的方式使用时，这些是惊人的，因为它们简化了从给定列表中选择一个选项的任务。但是默认的单选按钮看起来不太好。我们需要对其进行改造，使其在用户看来令人惊叹，这将显着改善网站的用户体验。

在本文中，我将逐步介绍如何在 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/小程序/网站源码资源！

avaScript复选框的分组单选实现

近期在制作MVC实例教学课件中，选择使用了在线考试作为题材进行页面的设计，在线考试主要提供单项选择题，用户点击选择项之后提交服务器端。页面布局时使用了复选按钮进行了选项的设置。本文主要讨论分组复选框模拟实现单选功能。

实现效果

本例设计使用复选按钮模拟单选按钮主要原因是出于页面的美观。考试页面需要将复选按钮按照题目进行分组，并且针对同一题目只允许选择一个，即模拟实现单选功能。设计页面效果如下图：

考试页面设计效果

考试页面设计效果如上图，按照题目编号分组后实现单选功能。操作动画演示如下图：

动态实现效果展示

实现基本思路

使用复选框模拟分组单选按钮设计及实现效果描述如上所示，其实现主要需要借助JavaScript前端交互脚本技术。具体实现思路描述如下：

1、获取被点击复选框编号

获取复选框被点击的编号id主要目的是需要通过编号判断当前复选框属于哪一个分组。进而确定第几道题的第几个选项被点击。

2、获取被点击复选框同组复选框编号

在获取当前点击复选框之后可以通过取余数运算获取余数。设计每个题目必须具有四个选项。通过%4进行取余数。根据余数获取本组其他复选框的ID值。如余数为0，表示当前被点击的是本组最后一个复选框。

3、设置本组其他复选框为未选中状态

在获取本组其他复选框之后，可以进一步通过JavaScript文档对象模型的getElementById()方法获取每一个复选框，并设置其checked属性值为false，表示未选中。

编码实现

在明确基本实现思路之后可以进行前端HTML页面的设计及JavaScript的编码操作实现等。按照设计思路，需要将试题中出现的所有复选框都设置ID属性。且ID属性需要按照从 1递增进行设置。设计Name属性用于实现分组，即同一题目四个选项对应的复选框Name相同。前端HTML代码描述如下：

input标记及属性设置

input标记及属性设置描述如上图所示，设置id用于标志每一个复选框，设计name标志分组，设计onclick事件用于接受模拟单选操作。

本例设计函数setValue()用于实现处理模拟单选操作，该函数传递标志自身的this。在接收到this之后可以通过它获取对应的id值，并进行进一步处理。基本操作步骤如下：

1、var eid=this.id;

获取当前点击复选框对应的id值并存储变量eid中。

2、var i=eid%4

取余数判断当前复选框在所属组中的位次。

3、var el=new Array(3)

在线咨询

上一篇：前端程序员入门html的4大方法，这两本神书真心经典！
下一篇：html基础必备-列表标记，前端小白一看就会

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商