开发者社区> 问答> 正文

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

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

展开
收起
杨冬芳 2016-06-15 11:14:08 6390 0
1 条回答
写回答
取消 提交回答
  • IT从业

    你标签选的 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')
    
    2019-07-17 19:38:56
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载