怎么修改单选框radio默认样式 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

怎么修改单选框radio默认样式

杨冬芳 2016-06-15 11:14:08 5395

默认radio的样式为:
screenshot
怎么改为图片替代,并能获取选中的值

分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:38:56

    你标签选的 jQuery,那么我就用 jQuery 尝试实现下这个效果,因为 jQuery 学得不深,因此不一定是最佳方案,背景图直接从网上找到。:)
    先把 HTML 码好:

    <div>
      <input type="radio" id="nba" checked="checked" name="sport" value="nba">
      <label name="nba" class="checked" for="nba">NBA</label>
      <input type="radio" id="cba" name="sport" value="cba">
      <label name="cba" for="cba">CBA</label>
    </div>
    

    接着是 CSS:

    input[type="radio"] {
      margin: 3px 3px 0px 5px;
      display: none;
    }
    label {
      padding-left: 20px;
      cursor: pointer;
      background: url(bg.gif) no-repeat left top;
    }
    label.checked {
      background-position: left bottom;
    }
    

    再就是 jQuery 代码了:

    $(function() {
      $('label').click(function(){
        var radioId = $(this).attr('name');
        $('label').removeAttr('class') && $(this).attr('class', 'checked');
        $('input[type="radio"]').removeAttr('checked') && $('#' + radioId).attr('checked', 'checked');
      });
    });
    

    screenshot
    刚看到你的问题中还有一个取得选中的单选按钮的值,这个不难取得:

    $('input[type="radio"]:checked').attr('value')
    
    0 0
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

推荐文章