前端单选框，点击文字勾选，简单修改

最新推荐文章于 2024-04-17 03:44:28 发布

渣渣大叔

最新推荐文章于 2024-04-17 03:44:28 发布

阅读量2.2k

点赞数

分类专栏：前端学习文章标签： html html5 es6

本文链接：https://blog.csdn.net/weixin_41514441/article/details/117783009

版权

前端学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

近期做项目调整

给大伙一个忠告-----尽量别让你们后台动前端代码，累点苦点也比改别人代码强

使用场景：前端需要在table中加入单选框，要求点击另一个元素块里的按钮实现单选框也被勾选

上干货

<!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>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
        div{
            display: flex;
            margin: 10px 0px;
        }
        span{
            display: block;
            width: 40px;
            height: 30px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <!-- 无论是es6模板写法也好，页面写死的也好你拿到的界面应该是这样 <span onclick="test(1)">1</span>-->
    <!-- 将方法放在input中 为按钮嵌套标签label -->
    <div><input type="radio" onclick="test(1)" name="radioArr" id="1"><label for="1"><span>1</span></label></div>
    <div><input type="radio" onclick="test(2)" name="radioArr" id="2"><label for="2"><span>2</span></label></div>
    <div><input type="radio" onclick="test(3)" name="radioArr" id="3"><label for="3"><span>3</span></label></div>
    <div><input type="radio" onclick="test(4)" name="radioArr" id="4"><label for="4"><span>4</span></label></div>
    <div><input type="radio" onclick="test(5)" name="radioArr" id="5"><label for="5"><span>5</span></label></div>
    <div><input type="radio" onclick="test(6)" name="radioArr" id="6"><label for="6"><span>6</span></label></div>
</body>
    <script>
        function test(data){
            console.log(data)
        }
    </script>
</html>

尽量少的改动jq，防止未知bug

在界面嵌套标签实现按钮与单选框的联动

渣渣大叔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端单选框，点击文字勾选，简单修改

近期做项目调整给大伙一个忠告-----尽量别让你们后台动前端代码，累点苦点也比改别人代码强使用场景：前端需要在table中加入单选框，要求点击另一个元素块里的按钮实现单选框也被勾选上干货<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
复制链接

扫一扫