点击文字选中单选按钮

最新推荐文章于 2021-06-10 16:10:28 发布

hp-future

最新推荐文章于 2021-06-10 16:10:28 发布

阅读量258

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42497122/article/details/108799184

版权

前端专栏收录该内容

29 篇文章 1 订阅

订阅专栏

点击文字选中单选按钮

直接上代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 200px;
      height: 300px;
      border: 1px solid red;
      margin: 100px auto;
      padding: 0 15px;
    }

    span {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="box">
    <p><input type="radio" name="1" checked /><span>1111111</span> </p>
    <p><input type="radio" name="1" /><span>2222222</span> </p>
    <p><input type="radio" name="1" /><span>3333333</span> </p>
    <p><input type="radio" name="1" /><span>4444444</span> </p>
  </div>
  <script src="./jquery-1.7.2.min.js"></script>
  <script>
    $('p').on('click', 'span', function () {
      $(this).siblings().attr('checked', 'checked')
      $(this).parent().siblings().children('input').prop('checked', false)
    })
  </script>
</body>

</html>

不过这里遇到一个问题

修改单选按钮的 checked 属性时，attr 无效，改为使用 prop；还有一点，prop 是jq 1.6版本后的，注意！

hp-future

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击文字选中单选按钮

点击文字选中单选按钮直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { m
复制链接

扫一扫