• 技术文章 >web前端 >html教程

    详解html中radio值的获取、赋值、注册事件示例

    高洛峰高洛峰2017-03-03 16:07:09原创1198
    这篇文章主要介绍了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


    效果如下:
    详解html中radio值的获取、赋值、注册事件示例

    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中任何一个有选中的,就会触发函数。

    更多详解html中radio值的获取、赋值、注册事件示例相关文章请关注PHP中文网!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:HTML radio值
    上一篇:HTML列表标签dl、ul、ol 的使用 下一篇:表单Form元素实现代码以注册为例的示例
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• Codeforces Round#263(Div.2)_html/css_WEB-ITnose• bootstrap问题 高手在哪里?_html/css_WEB-ITnose• div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox)_html/css_WEB-ITnose• ajax简单小例子_基于xml的实现• ajax的其他小知识
    1/1

    PHP中文网