zoukankan      html  css  js  c++  java
  • js jquery radio 选中 选中值

    radio示例:

    <label><input type="radio" name="type" id="type" value="year" /></label>
    <label><input type="radio" name="type" id="type" value="month" checked/></label>
    <label><input type="radio" name="type" id="type" value="date" /></label><br />

    js操作

    // 获取dom
    var arrObj = document.getElementsByName("type");

    一,获取

    // 获取radio数量
    console.log(arrObj.length);
    // 获取选中radio的值
    for(var i = 0; i < arrObj.length; i++) {
        if(arrObj[i].checked) {
            console.log(arrObj[i].value);
        }
    }

    二,选中

    for(var i = 0; i < arrObj.length; i++) {
        // 选中某个value的选项
        if(arrObj[i].value == "year") {
            arrObj[i].checked = true;
        }
        // 选中第三个
        if(i == 2){
            //arrObj[i].checked = true;
            arrObj[i].checked = "checked";
        }
    }

    jQuery操作

    一,获取

    // 获取radio数量
    console.log($("input:radio[name='type']").length);
    // 获取选中radio的值
    console.log($("input:radio[name='type']:checked").val());

    二,选中

    // 选中某个value的选项
    $("input:radio[name='type'][value=year]").prop("checked", "checked");
    // 选中第几个选项
    $("input:radio[name='type']").eq(2).prop("checked", "checked");
    // 选中第一个,选中最后一个
    $("input:radio[name='type']:first").prop("checked", "checked");
    $("input:radio[name='type']:last").prop("checked", "checked");
    // extra:获取radio节点
    // 1.伪元素
    $("input:radio");
    // 2.type
    $("input[type='radio']");
    
    // extra:选中方式
    // 1.click
    $("input:radio[name='type'][value=year]").click();
    // 2.prop
    $("input:radio[name='type'][value=year]").prop("checked", "checked"); // 推荐
    $("input:radio[name='type'][value=year]").prop("checked", true);
  • 相关阅读:
    Tenserflow学习日记(13)
    Tenserflow学习日记(12)
    Tenserflow学习日记(10)
    利用file_get_contents();抓取网络上需要的信息
    laravel5.4自定义验证规则
    getimagesize();获取图片的长度与宽度
    php得到程序的执行时间
    laravel 处理图片
    siege 压力测试工具的安装与使用
    laravel 实现点赞功能
  • 原文地址:https://www.cnblogs.com/ooo0/p/8619692.html
Copyright © 2011-2022 走看看