怎样实现点击.list-text内的文字，自动选中input框

改了一下radio的默认样式，现在该怎样实现原来的label绑定文字的功能？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    .change-radio{
            position: relative;
            line-height: 30px;
        }

        input[type="radio"] {
            width: 20px;
            height: 20px;
            opacity: 0;
        }

        label {
            position: absolute;
            left: 5px;
            top: 3px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #999;
        }

        /*设置选中的input的样式*/
        /* + 是兄弟选择器,获取选中后的label元素*/
        input:checked+label {
            background-color: #fe6d32;
            border: 1px solid #fe6d32;
        }

        input:checked+label::after {
            position: absolute;
            content: "";
            width: 5px;
            height: 10px;
            top: 3px;
            left: 6px;
            border: 2px solid #fff;
            border-top: none;
            border-left: none;
            transform: rotate(45deg)
        }
.list{
    display:flex;
}
  </style>
</head>

<body>
    <div class='list'>
      <div class='list-text'>这是文字红红火火恍恍惚惚</div>
      <div class='change-radio'>
        <input id="item1" type="radio" name="item" value="选项一" checked>
        <label for="item1"></label>
        <span></span>
      </div>
    </div>
    <div class='list'>
      <div class='list-text'>这是文字红红火火恍恍惚惚</div>
      <div class='change-radio'>
        <input id="item2" type="radio" name="item" value="选项一" checked>
        <label for="item2"></label>
        <span></span>
      </div>
    </div>

</body>

</html>

阅读 2.8k

var list = document.querySelectorAll('.list-text'); list.forEach(function(item){ item.onclick = function(e){ e.target.nextElementSibling.firstElementChild.checked = true } })

<label class='list' for="item2"> <div class='list-text'>这是文字红红火火恍恍惚惚</div> <div class='change-radio'> <input id="item2" type="radio" name="item" value="选项一" checked> <span></span> </div> </label>

怎样实现点击.list-text内的文字，自动选中input框

你尚未登录，登录后可以

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

css如何设置纵向滚动条的高度？

如何在CSS中实现滚动条不溢出圆角框？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

表数据复制一条添加到数据库，前端跳转到数据所在的page页，滚动到对应行并添加高亮样式异常？