html中radio值的获取、赋值、注册事件示例详解
来源:互联网 发布:学java看什么书 编辑:程序博客网 时间:2024/04/30 14:15
1,radio分组
只要name一样,就是一组的,即一组中只能选择一个,如下:
<span>group1:</span>
<input type="radio" id="radio1" checked="checked" name="group1" />radio1
<input type="radio" id="radio2" name="group1" />radio2
<input type="radio" id="radio3" name="group1" />radio3
<span>group2:</span>
<input type="radio" id="radio4" checked="checked" name="group2" />radio4
<input type="radio" id="radio5" name="group2" />radio5
<input type="radio" id="radio6" name="group2" />radio6
效果如下:
2,获取选中的radio节点
使用jquery可以很方便做到,先选择group,然后过滤出checked的,如下:
var group1 = $("[name='group1']").filter(":checked");
console.log(group1.attr("id"));
3,选中一个radio节点
使用jquery设置checked属性:
$("#radio2").attr("checked", "checked");
4,去选中一个radio节点
移除checked属性:
$("#radio1").removeAttr("checked");
这样做的结果可能造成一组radio中没有一个处于选中状态。
5,注册选中去选中事件
还是使用jquery的on函数来注册change事件,如下:
$("[name='group1']").on("change",
function (e) {
console.log($(e.target).val());
}
);
这样只要group1中任何一个有选中的,就会触发函数。
只要name一样,就是一组的,即一组中只能选择一个,如下:
复制代码
代码如下:<span>group1:</span>
<input type="radio" id="radio1" checked="checked" name="group1" />radio1
<input type="radio" id="radio2" name="group1" />radio2
<input type="radio" id="radio3" name="group1" />radio3
<span>group2:</span>
<input type="radio" id="radio4" checked="checked" name="group2" />radio4
<input type="radio" id="radio5" name="group2" />radio5
<input type="radio" id="radio6" name="group2" />radio6
效果如下:
2,获取选中的radio节点
使用jquery可以很方便做到,先选择group,然后过滤出checked的,如下:
复制代码
代码如下:var group1 = $("[name='group1']").filter(":checked");
console.log(group1.attr("id"));
3,选中一个radio节点
使用jquery设置checked属性:
复制代码
代码如下:$("#radio2").attr("checked", "checked");
4,去选中一个radio节点
移除checked属性:
复制代码
代码如下:$("#radio1").removeAttr("checked");
这样做的结果可能造成一组radio中没有一个处于选中状态。
5,注册选中去选中事件
还是使用jquery的on函数来注册change事件,如下:
复制代码
代码如下:$("[name='group1']").on("change",
function (e) {
console.log($(e.target).val());
}
);
这样只要group1中任何一个有选中的,就会触发函数。
0 0
- html中radio值的获取、赋值、注册事件示例详解
- html中radio值的获取、赋值、注册事件。
- jQuery获取Radio,CheckBox选择的Value值(示例代码)
- Html中利用jQuery获取单选按钮(radio)的值
- javascript中获取radio的值
- js中获取radio的值
- 快速获取事件日志中注册的所有事件源
- html radio的onclick事件设置
- jquery获取选中单选按钮radio的值,监听type=radio的click事件
- 获取radio的值
- 获取radio点击事件
- jQuery radio的取值与赋值
- jQuery radio的取值与赋值
- jQuery radio的取值与赋值
- js中获取jsp表单中radio类型的值
- javascript中获取选中的radio的值
- javascript中获取选中的radio的值(转)
- html中radio的checked与选中
- eclipse安装maven插件
- ui-router中路由的二级嵌套
- 淡疼的itoa和abs: 'itoa' was not declared in this scope; 'abs' was not declared in this scope
- 推荐系统实践读书笔记一
- 【技巧】windows常用技巧
- html中radio值的获取、赋值、注册事件示例详解
- NetRouter 7620 7688 7628 百度语音识别测试
- eclipse创建maven web项目
- 一个小白从零基础自学Android编程笔记之前言
- [26] Remove Duplicates from Sorted Array
- Webx系列之文件下载
- Android编码规范
- 84. Largest Rectangle in Histogram
- JS中的JSON