今天在 QQ 群里有朋友问到 jQuery 怎么获取选中 radio 后的文本，可见要熟练的使用 jQuery 应该很好的掌握 jQuery 选择器，下边就让我们简单看看这个问题。
首先，他给出的 HTML 示例如下：
<input type="radio" id="male" name="sex" value="1" />男  <input type="radio" id="female" name="sex" value="2" />女  
在这里直接给出 jQuery 获取 radio 选中后的文本的方法，如下：
$("input[name='sex']:checked")[0].nextSibling.nodeValue  
方法将 jQuery 对象转换为 DOM 对象后，再使用原生的 javascript 方法获取文本。在我回复朋友前，他通过在 radio 后添加 span 标记来解决这个问题：
 <input type="radio" id="male" name="sex" value="1" /><span>男</span>  
接来下获取时使用 next() 选择器，如下：
 $("input[name='sex']:checked").next("span").text()  
问题看似到这里就结束了，其实不然，这并不是好的用户体验。好的做法应该为 radio 添加 for 标记，这样在点击 radio 文本"男"或"女"的时候也能选中 radio，这比让用户点击一个小圆圈容易多了。所以最好的 HTML 标记应该如下：
 <input type="radio" id="male" name="sex" value="1" />  <label for="male">男</label>  <input type="radio" id="female" name="sex" value="2" />  <label for="female">女</label>  
最后获取 radio 选中后的文本我相信你已经会了，如下：
  $("input[name='sex']:checked").next("label").text()  
这样使用 jQuery 成功获取了 radio 选中后的文本，这里主要是指最后一个方法。本篇内容虽然简单，但着重说明了一个道理——细节决定成败！
     
    
    

<input name='rad' type='radio' value='r1' />
<input name='rad' type='radio' value='r2' />
//JS CODE
$(":radio[name='rad'][value='数据库值']").click();
或者$(":radio[name='rad'][value='数据库值']").attr("checked",true);
js:
$(":radio[name='homecareentity.showFlag'][value='true']").attr("checked",true);

网上说了很多,用JS解决的我就不说,不是我喜欢的道道
 
 要让<html:radio>选择很关键的一点,就是,这个JSP势必对应的一个actionform吧,给它个初始值就OK了
 
但是这个方案不好,默认值我怎么知道,如果这个值要动态呢?
 
请注意到name属性
 
性别<html:radio  value="1" property="sex" name="user">男</html:radio>
            <html:radio value="2" property="sex"  name="user">女</html:radio>
            <html:radio value="0" property="sex"  name="user">保密</html:radio>

 
只要在request,session等范围内存在user,这个上面的标签就会根据user.sex的值产生默认选中了
 
 
 

现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox样式的方法。
原理：大致原理都是使用原生的checkbox或input标签，在其后面设置相关联的label元素。给元素设置为透明，然后通过定位让用户看到的是元素，利用css的原生属性来判断用户的操作，设置选中后的label样式,即input[type=checkbox]:checked+label{}
利用css3伪元素实现样式修改
html代码
css样式
优点：充分借助了CSS3的优势，无需使用js和图片，仅用纯CSS3就可搞定
缺点：兼容性较差，仅支持IE9+
案例：
利用图片实现样式修改
实现思路
1.设置input 属性hidden对该input进行隐藏
2.借助label for标签通过id绑定input ，这样在点击label时实际就是点击了input
3.定义label的样式，设置未选中状态的背景图
4.使用相邻选择器设置选中状态label的样式
以上是radio单选框的实现代码，checkbox也是类似 将input type定义成checkbox即可
利用插件实现
awesome-bootstrap-checkbox插件
awesome-bootstrap-checkbox是一款可以美化Bootstrap复选框和单选按钮的插件。它使用纯CSS编写，没有任何的javascript文件。它通过在原生Bootstrap组件的基础上做一些小改动，即可完成漂亮的美化效果。
插件下载：https://www.bootcdn.cn/awesom...
注：需要引入awesome-bootstrap-checkbox.css、font-awesome.css以及font awesome对应的字体font文件
pretty.css
pretty.css是一款纯css3漂亮的checkbox和radio美化效果。pretty.css可以和多种字体图标结合使用，对原生的checkbox和radio进行美化，还可以制作按钮点击时的动画效果。
知道的方法先介绍到这里，大家如有更好的方法欢迎留言讨论。
点击【右上角，关注 子瑜说IT 】持续更新IT资讯以及web前端开发教学
8年开发老码农福利赠送：网页制作，网站开发，web前端开发，从最零基础开始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移动端小程序项目实战【视频＋工具＋电子书＋系统路线图】都有整理，送给每一位对编程感兴趣的小伙伴
获取方式：
右上角有私信，请私信发我：01 即可获取！