为什么我的Radio先选中一个,再选中另一个的时候,之前的checked不会取消呢 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

为什么我的Radio先选中一个,再选中另一个的时候,之前的checked不会取消呢

2016-06-01 19:41:32 2108 1

screenshot
为什么我的Radio先选中一个,再选中另一个的时候,之前的checked不会取消呢

这里是html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tabs</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="wapper">
        <div class="tabs">
            <div class="tab-title">
                <ul>
                    <li>
                        <input type="radio" id="tab-control-1" checked="checked">
                        <a href="#tab-item-1">标签一</a>
                    </li>
                    <li>
                        <input type="radio" id="tab-control-2">
                        <a href="#tab-item-2">标签二</a>
                    </li>
                    <li>
                        <input type="radio" id="tab-control-3">
                        <a href="#tab-item-3">标签三</a>
                    </li>
                    <li>
                        <input type="radio" id="tab-control-4">

css:

/* CSS Reset */
* {
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}

body {
    background: #3498DB;
}

a {
    color: #000;
    text-decoration: none;
}

/* Tabs Start */

#wapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 200px;
}

.tabs {
    background: #fff;
    min-height: 400px;
    width: 100%;
    overflow: hidden;
}

.tab-title {
    line-height: 60px;
    overflow: hidden;
}

.tab-title ul li{
    cursor: pointer;
    float: left;
    width: 20%;
    height: 60px;
    position: relative;
    text-align: center;
}

.tab-title input {
    opacity: 0.5;
    position: absolute;
    z-index: 99;
}

.tab-title input,
.tab-title a {
    display: block;
    width: 100%;
    height: 60px;
}

.tab-title input:checked + a {
    background: #fff;
}

.tab-title ul li a {
    background: #f0f0f0;
    z-index: 9;
}

.tab-content {
    padding: 20px;
}
取消 提交回答
全部回答(1)
  • 西秦说云
    2019-07-17 19:23:44
    <li>
        <input type="radio" id="tab-control-1" checked="checked">
        <a href="#tab-item-1">标签一</a>
    </li>
    <li>
        <input type="radio" id="tab-control-2">
        <a href="#tab-item-2">标签二</a>
    </li>
    <li>
        <input type="radio" id="tab-control-3">
        <a href="#tab-item-3">标签三</a>
    </li>
    <li>
        <input type="radio" id="tab-control-4">
        <a href="#tab-item-4">标签四</a>
    </li>
    <li>
        <input type="radio" id="tab-control-5">
        <a href="#tab-item-5">标签五</a>
    </li>

    问题在于你没有给他们命名,而且要命名相同的名字,这样radio就会在同名的一个组里保持一个或者零个被选中。

    改成这样:

    <li>
        <input type="radio" name="tag" id="tab-control-1" checked="checked">
        <a href="#tab-item-1">标签一</a>
    </li>
    <li>
        <input type="radio" name="tag" id="tab-control-2">
        <a href="#tab-item-2">标签二</a>
    </li>
    <li>
        <input type="radio" name="tag" id="tab-control-3">
        <a href="#tab-item-3">标签三</a>
    </li>
    <li>
        <input type="radio" name="tag" id="tab-control-4">
        <a href="#tab-item-4">标签四</a>
    </li>
    <li>
        <input type="radio" name="tag" id="tab-control-5">
        <a href="#tab-item-5">标签五</a>
    </li>
    0 0
相关问答

1

回答

Kubernetes中节点存储的Pod驱逐触发条件是什么?

2022-04-03 14:26:30 780浏览量 回答数 1

1

回答

JSON 语法是什么语法的子集?

2021-11-30 20:16:08 261浏览量 回答数 1

1

回答

flask中request的属性json的类型是什么?

2021-11-17 19:58:05 330浏览量 回答数 1

1

回答

kubectl中基于 stdin 输入的 JSON 替换 pod的命令是什么呀?

2021-10-27 20:29:25 314浏览量 回答数 1

1

回答

kubectl中运行一个Pod的命令是什么呀?

2021-10-28 21:55:28 135浏览量 回答数 1

1

回答

jquery 2.0以上版本 radio 设置 checked 第二次后会失效

2016-07-13 10:44:42 1703浏览量 回答数 1

1

回答

jquery checkbox勾选/取消勾选的诡异问题

2016-07-08 11:40:46 1772浏览量 回答数 1

1

回答

关于JQuery checkbox至少选中的问题

2016-07-07 16:19:09 1755浏览量 回答数 1

1

回答

value="true" 的checkbox为什么不能选中

2016-03-12 16:46:37 1772浏览量 回答数 1

1

回答

请问为什么说json是无类型的???

2016-02-29 17:25:03 1698浏览量 回答数 1
+关注
杨冬芳
IT从业
1
文章
9167
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载