html中radio值的获取、赋值、注册事件示例详解
发布时间：2014-05-13 10:42:16 作者：佚名 
我要评论
我要评论这篇文章主要介绍了html中radio值的获取、赋值及注册事件，非常适合新手朋友，喜欢html的朋友不要错过了哈
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中任何一个有选中的，就会触发函数。
相关文章
在 Web 开发中，文本的视觉效果是提升用户体验的重要因素之一,通过 CSS 技巧，我们可以创造出许多独特的效果，例如文字镂空效果,本文将带你一步一步实现一个简单的文字镂空2024-11-17
在Html中,a标签默认的超链接样式是蓝色字体配下划线,这可能不满足所有设计需求,如需去除这些默认样式,可以通过CSS来实现,本文给大家介绍Html去除a标签的默认样式的操作代码2024-09-25- 在HTML中,可以通过设置CSS的resize属性为none,来禁止用户手动拖动文本域（textarea）的大小,这种方法简单有效,适用于大多数现代浏览器,但需要在老旧浏览器中进行测试以确保2024-09-25
本文详细介绍了如何利用HTML和CSS实现多种风格的进度条,包括基础的水平进度条、环形进度条以及球形进度条等,还探讨了如何通过动画增强视觉效果,内容涵盖了使用HTML原生标签2024-09-19- Canvas 提供了一套强大的 2D 绘图 API，适用于各种图形绘制、图像处理和动画制作,可以帮助你创建复杂且高效的网页图形应用，这篇文章主要介绍了HTML中Canvas关键知识点总结2024-06-03
本文主要介绍了html table+css实现可编辑表格的示例代码，主要使用HTML5的contenteditable属性，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习2024-03-06
本文主要介绍了HTML中使用Flex布局实现双行夹批效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2024-02-22
在网站开发中，登录页面是必不可少的一部分，本文就来介绍一下HTML+CSS实现登录切换，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需2024-02-02
本文主要介绍了HTML+CSS实现全景轮播的示例代码，实现了一个简单的网页布局，其中包含了五个不同的盒子，每个盒子都有一个不同的背景图片，并且它们之间有一些间距，下面就2024-02-02
来到圣诞节了，那么就可以制作一颗HTML的圣诞树送给朋友，没有编程基础的小白也可以按照步骤操作也可以运行起来代码的，喜欢的朋友快来体验吧2023-12-26
最新评论