【前端JS】radio 可单选可点击取消选中
2015-07-14 14:44
351 查看
一般情况下 radio 单选框只能实现多选一的效果,但是一旦选择其中一个后,这个单选框就不可点击取消其选中状态了,这种功能在某些业务环境下并不适用,有时我们既需要单选框的多选一效果,也需要复选框的可点击取消效果。为此本文提供一种 JQuery 写法。
在前文所设的需求下,我们只需要取到 0 个或 1 个值,因此为取值方便考虑,本文推荐使用 radio 。
End .
/* 1. 取消与当前控件name 相同的所有控件的选中状态 2. 选中当前控件 3. 如果当前控件在点击前是选中状态,则点击后取消其选中状态 */ $("input:radio").click(function(){ var domName = $(this).attr('name');//获取当前单选框控件name 属性值 var checkedState = $(this).attr('checked');//记录当前选中状态 $("input:radio[name='" + domName + "']").attr('checked',false);//1. $(this).attr('checked',true);//2. if(checkedState == 'checked'){ $(this).attr('checked',false); //3. } });这里把 radio 换成 checkbox 也能得到同样效果。
在前文所设的需求下,我们只需要取到 0 个或 1 个值,因此为取值方便考虑,本文推荐使用 radio 。
End .
相关文章推荐
- Easy way to use JText 2.1.7 and HTML-style template for generating report
- 动态加载script文件
- 一个proxy.jsp用于openlayers的代理
- html Emmet(即Zen coding) 快速输入
- JSON与DataTable(DataSet)相互转化
- PreferenceFragment或PreferenceActivity使用笔记
- 【转】Caffe源码阅读(1) 全连接层
- js 字符串转换成数字的三种方法
- html5页面中拨打电话的方式
- 使用SharedPreferences读写数据
- GetListToJson
- FFmpeg转HTML5支持的视频格式
- H5版俄罗斯方块(4)---火拼对战的雏形
- javascript中setTimeout与setInterval用法
- 关于Bootstrap的理解
- 使用HTML5的video标签播放视频
- 解决子级用css float浮动 而父级div没高度不能自适应高度
- jQuery EasyUI 在datagrid上使用combotree 进行多选
- CSS3的过渡、动画、转换
- hadoop入门之设置datanode的心跳时间的方法